Question

网页导航栏随着页面下拉而逐渐保持在网页顶部的js代码及原理

如米柚社区首页这般，导航栏本不是在最上边的，随页面下拉而逐渐fixed于页面顶端，求问大神相关代码及原理





Answer 1

获取那个导航DIV的top坐标，然后判断滚动条大于或等于top坐标的参数就给导航DIV添加position:fixed;top:0;样式就可以了反过来就是删除这些样式

追问

大神，可以详细点么？

追答

var top=$(".top").offset().top;
$(window).scroll(function () {
  if ($(window).scrollTop() >= top) {
    $(".top").attr("style", "position:fixed;top:0;left:0;z-index:10;");
  } else {
     $(".top").attr("style", "");
  }
}).trigger("scroll");

追问

可是需要引入jquery.js么？我试了下，没有效果啊

追答

<script src="js/jquery-1.8.3.js"></script>
<script>
(function($){
var top = $(".top").offset().top;
$(window).scroll(function () {
  if ($(window).scrollTop() >= top) {
     $(".top").css({position:"fixed",top:0,left:0,zIndex:10});
  } else {
     $(".top").removeAttr("style");
  }
}).trigger("scroll");
})(jQuery);
</script>