源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: div滚动至顶部后固定在顶部 [打印本页]

作者: 洪七公 时间: 2023-2-4 10:50
标题: div滚动至顶部后固定在顶部

前言

在浏览网页的时候，经常会看到这种效果：导航栏向上滚动到浏览器顶部之后就固定在顶部不再往上，而向下滚动回来的时候又跟着原来的布局下去

实现的方式可以是通过jquery注册滚动事件，在事件中判断导航栏到顶部的距离，如果小于等于0则将导航栏的css样式中的position设置为fixed，并且改变一下颜色等样式（可选）。如果大于0则回复原来的样式。

<script type="application/javascript">
/*导航栏滚动到顶部后fix*/
$(function () {
      var elm = $('.nav-bar');
      var startPos = $(elm).offset().top;
      $.event.add(window, "scroll", function () {
         var p = $(window).scrollTop();
         if ((p) > startPos) {  //到顶部
            $(elm).css('position', 'fixed');
            $(elm).css('top', '0px');

         } else { //拉回来
            $(elm).css('position', 'relative');
         }
      });
});
</script>

欢迎光临源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)