jQuery 滚动到指定位置触发动画

项目需求：将某一个div在滑动的时候固定在顶端，滑动到顶端的时候回到原来位置。

如gif所示：

所需jQuery文件：https://pan.baidu.com/s/1qXTEifU

1.css加上active 

.active {
	position: fixed;
    	top: -10px;//根据需要可以调整 就是活跃分区距离顶端的距离
    	left: 0px;
    	right: 0px;
    	z-index: 1000;
	}

2.将所需要fixed的div起了id名，我给它起的是segment

<div id = "segment" class="firstblock">

3.关联jQuery.min.js文件

<script type="text/javascript" src="../script/jquery.min.js"></script>

4.上js实现代码

function gdjz(div,cssname,offset){
    var a,b,c,d;
    d=$(div).offset().top;
    a=eval(d + offset);
    b=$(window).scrollTop(); //监控窗口已滚动的距离;
    c=$(window).height();//浏览器窗口的高度*/
    console.log(a,b,c,d);
			
    if(b>=60){
	console.log("add");
        $((div)).addClass((cssname));
     } else if (b < 60) {
        console.log("remove");
        $((div)).removeClass((cssname));
     }
}
    	
$(window).scroll(function(){
    gdjz("#segment",'active',60);
})

此处需要解释的几个点

①offset就是偏移量 这个是我们自定的

②b是滚动距离

③当滚动距离大于等于我们设置的偏移量的时候执行addClass方法

④当滚动距离小于的时候执行removeClass方法

⑤偏移量的大小应该等于搜索框的height+上下padding的高度

⑥我个人觉得这样效果比较美观

最后，大家可以根据需要调整~

我是web的菜鸟，有些地方全靠自己理解，所以如果大家看到我的文章，烦请指出不足和错误之处，谢谢！

因为不常在博客上挂着，有问题联系我请扫二维码加我微信：