使标题变粘并减小页面滚动的大小答案

【问题标题】：Make the header sticky and reduce the size on page scroll使标题变粘并减小页面滚动的大小
【发布时间】：2015-11-14 16:14:39
【问题描述】：

我有这段代码，我希望header 粘贴在页面滚动上并减小标题大小。但是我在向下滚动时只管理了粘性标题。我希望在滚动顶部时恢复所有这些效果。任何解决方案？

这是我的代码：（也是on 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>

【问题讨论】：

欢迎来到 Stack Overflow！请查看tour，环顾四周，并通读help center，尤其是How do I ask a good question? 与您的问题相关的任何代码都必须在您的问题中in，而不仅仅是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该遵循一些随机链接来帮助你。如果这个问题没有意义并且没有链接就无法回答，那么它不适合这个网站。而是将minimum complete example 放在问题中。
我已经为您将您的小提琴转换为 Stack Snippet（工具栏上的 <> 按钮），所以现在内容是问题。

标签： javascript jquery html css

【解决方案1】：

只需添加一个 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 代码中以及元素有或没有类的事实中都有标志）。

【讨论】：

【解决方案2】：

使用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>

【讨论】：

确实，toggleClass 更干净，如果我们每次都这样做（就像我和 OP 一样）。

【解决方案3】：

添加这些，看看魔法

$(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/

【讨论】：