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

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

如gif所示：

 

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

 

1.css加上active 

 

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

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

 

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

 

3.关联jQuery.min.js文件

 

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

4.上js实现代码

 

1. function gdjz(div,cssname,offset){  
2.     var a,b,c,d;  
3.     d=$(div).offset().top;  
4.     a=eval(d + offset);  
5.     b=$(window).scrollTop(); //监控窗口已滚动的距离;  
6.     c=$(window).height();//浏览器窗口的高度*/  
7.     console.log(a,b,c,d);  
8.               
9.     if(b>=60){  
10.     console.log("add");  
11.         $((div)).addClass((cssname));  
12.      } else if (b < 60) {  
13.         console.log("remove");  
14.         $((div)).removeClass((cssname));  
15.      }  
16. }  
17.           
18. $(window).scroll(function(){  
19.     gdjz("#segment",'active',60);  
20. })  

此处需要解释的几个点

 

①offset就是偏移量 这个是我们自定的
②b是滚动距离
③当滚动距离大于等于我们设置的偏移量的时候执行addClass方法
④当滚动距离小于的时候执行removeClass方法
⑤偏移量的大小应该等于搜索框的height+上下padding的高度
⑥我个人觉得这样效果比较美观

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