Question

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

这是我的代码:(也on jsFiddle）

＆＃13;

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

＆＃13;

.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}

＆＃13;

<header class="clearHeader">
</header>

<div class="wrapper">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

＆＃13;

Answer 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代码中都有标记，而且元素有或没有类）。

Answer 2

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

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

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

＆＃13;

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

＆＃13;

.clearHeader {
  height: 200px;
  background-color: rgba(107, 107, 107, 0.66);
  position: fixed;
  top: 200;
  width: 100%;
}
.darkHeader {
  height: 100px;
}
.wrapper {
  height: 2000px;
}

＆＃13;

<header class="clearHeader">
</header>

<div class="wrapper">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

＆＃13;

Answer 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/

使标题粘滞并减小页面滚动的大小

3 个答案: