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的菜鸟，有些地方全靠自己理解，所以如果大家看到我的文章，烦请指出不足和错误之处，谢谢！

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