使页眉具有粘性并减小页面滚动的大小

Make the header sticky and reduce the size on page scroll

本文关键字：滚动 有粘性      更新时间：2023-09-26

我有这样的代码，我希望header在页面滚动时保持不变，同时减小标题大小。然而，我只处理了向下滚动时的粘性标题。我希望所有这些效果在滚动顶部时恢复。有什么解决方案吗？

这是我的代码：（也在jsFiddle上）

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
  }
});
.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

只需添加一个else即可删除类：

if (scroll >= 500) {
  $(".clearHeader").addClass("darkHeader");
} else {                                           // <=== New
  $(".clearHeader").removeClass("darkHeader");     // <=== bit
}


$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
  } else {
    $(".clearHeader").removeClass("darkHeader");
  }
});
.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

但是由于scroll事件在用户滚动时发生了多次，因此可以通过维护一个标志来减少我们在滚动上所做的工作量：

// Scoping function to avoid creating a global
(function() {
  var haveDarkHeader = false;
  
  $(window).scroll(function() {
    var wantDarkHeader = $(window).scrollTop() >= 500;
    
    if (wantDarkHeader != haveDarkHeader) {
      haveDarkHeader = wantDarkHeader;
      $(".clearHeader").toggleClass("darkHeader", haveDarkHeader);
    }
  });
})();
.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

不过，它更多的是代码和重复状态（我们在JavaScript代码中以及元素有或没有类的事实中都有标志）。

使用toggleClass()根据滚动位置添加或删除类：

$(window).scroll(function() {    
  var scroll = $(window).scrollTop();
  $(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});

如果scroll大于或等于500，则将应用darkHeader类。否则，它将被删除。

$(window).scroll(function() {    
  var scroll = $(window).scrollTop();
  $(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

添加这些并查看神奇的

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    }
    else{
        $(".clearHeader").removeClass("darkHeader");
    }
});
.clearHeader{
    height: 200px; 
    background-color: #333;
    position: fixed;
    top:200;
    width: 100%;
}
.darkHeader {
    height: 100px;
}
.wrapper {
    height:2000px;
}

想了解更多信息，请查看我的小提琴：-http://jsfiddle.net/Jinukurian7/w9EgE/5/

相关文章：