8-15晚上用JQ仿作实现类似的sticky定位

------------恢复内容开始------------

html结构：

<div class="scroll" id="gd"></div>

css样式：

body{
　　height:8000px;/*只是为了实现效果*/

}
.scroll{
width: 100%;
height: 250px;
background: #f00;
}

.sfixed{/*当盒子到达顶部添加这个样式*/

 position: fixed; left: 0px; top:0px; z-index: 10; }

 

  

JQ：

   

$(function(){

var top1=$(".scroll").offset().top;
    $(window).scroll(function(){
        var  win_top=$(window).scrollTop();
        // console.log(win_top);
        　var  top=$(".scroll").offset().top;
        console.log(top);
        if(win_top>=top){
            　$(".scroll").addClass("sfixed");
        　}//如果此处用else判断来remove sfixed这个类的话是不行的，因为当加上这个类的时候，
　　　 　　 //".scroll"这个元素fixed的top值是0，获取到的offset.top就相当于是当前滚动条的滚动的距离，
　　     　//win_top与top值就一直相等了，这样会导致抖动；
　　　　　  //只有与以前的距离做比较才能实现滑上去的时候能回到原来的位置。
        if(win_top<top1){
    　　　　　$(".scroll").removeClass("sfixed");
　　　　　　}
    })

})

 

附原文网址：https://www.cnblogs.com/zjjDaily/p/6006812.html

------------恢复内容结束------------