来领C币了！请问javscipt里怎么实现div固定在屏幕顶上，滚动向下的话，它一直显示？

问题描述：

答

position fixed

答

div样式中加上position: fixed; top: 0 固定到顶部

答

楼上正解记得在加上z-index

答

使用绝对定位，上外边距设置为div的高度。

答

用浮动定位，随便进一个那种网站，里面的广告就是用的浮动定位

答

style="position: fixed;"

答

style {
position: fixed,
z-index: 999
}

答

这是js代码:
window.onscroll=function(){
var topScroll =document.body.scrollTop;//滚动的距离,距离顶部的距离
var bignav = document.getElementById("nav");//获取到导航栏id
if(topScroll > 250){ //当滚动距离大于250px时执行下面的东西
bignav.style.position = 'fixed';
bignav.style.top = '0';
bignav.style.zIndex = '9999';
}else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
bignav.style.position = 'static';
}
}

答

定位方式
属性：position
取值：
static
默认值，静态

            relative 相对定位

            absolute 绝对定位

            fixed 固定定位

        注意：将元素的position设置为relative/absolute/fixed任意一种的话
        ，那么该元素就称为 ”已定位元素“

        偏移属性（共4个）
        作用：配合已定位的元素实现位置的移动
        属性 top / right / bottom / left

        取值：以px为单位的数值
        top：以元素的上边为基准边移动元素 取值为正 下移 为负上移
        right 。。。 ·                  取值为正 左移 为负右移
        bottom 。。。                        取值为正 上移 为下上移
        left 。。。                          取值为正 右移 为负左移


    相对定位
        元素会相对于它原来的位置偏移某个距离
        元素位置微调时使用相对定位

        属性：position
        取值
            relative

        配合着偏移属性 实现位置的移动


    绝对定位
        绝对定位的元素会脱离文档流-不占空间
        绝对定位的元素会相对于离它最近的，已定位的
        ，祖先元素去实现位置的初始化
        如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化
        属性：position
        取值：aboolute
        配合着 偏移属性 实现位置的定位

        绝对定位的元素会变为块级元素
        （任何元素变为就对定位的话，就可以直接修改尺寸）

    堆叠顺序
        已定位元素们堆叠在一起的排列顺序
        语法
            属性：z-index
            取值：无单位的数字，数字越大元素越靠上，默认值为0
            如果元素的堆叠顺序相同，则后来者居上
            只有已定位的元素才能使用z-index
            relative/absolute/fixed
            父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的


    固定定位
        让元素固定在浏览器窗口的某个位置处，
        不会随着滚动条的滚动而发生位置的改变

        语法
        属性：position
        取值：fixed
        配合着 偏移属性实现元素位置的固定

        固定定位的元素永远都是相对于body实现位置初始化的

        固定定位的元素会变成块级元素

答

为什么不用css都方式来实现呢，用css来实现更方便吧

答

定位方式
属性：position
取值：
static

答

$(window).scroll(function(){
      sTop = $(this).scrollTop();//当前滚动高度
      oInfo.text(sTop + '-' + oTop);//这一句 只是为了看看数据 没有多大的用处
      if(sTop >= oTop){//当滚动高度要大于固定div高度时
         $(".catalog-menu").css({"position":"fixed","top":"0"});
      }else{
      $(".catalog-menu").css({"position":"static"});
    }
   });

来领C币了！请问javscipt里怎么实现div固定在屏幕顶上，滚动向下的话，它一直显示？

相关推荐