javascript - 使用jquery滚动页面时添加bootstrap类

Question

我在使用 jQuery 时遇到问题。

我想在滚动页面时添加 fixed-top 类(Bootstrap 4)，但事实并非如此。

jQuery(document).ready(function($){
  var scroll = $(window).scrollTop();

  if (scroll >= 500) {
    $(".robig").addClass("fixed-top");
  } else {
    $(".robig").removeClass("fixed-top");
  }
});

你能看出我做错了什么吗？

Answer 1

您的 scroll 变量永远不会更新。您需要将代码添加到 scroll 事件中，如下所示:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 130) {
      $(".robig").addClass("fixed-top");
    } else {
      $(".robig").removeClass("fixed-top");
    }  
  });

});

body {
  margin: 0; 
}

.foo {
  height: 140vh;
  background: black;
}

.robig {
  width: 100%;
  height: 10vh;
  background: lime;
}

.fixed-top {
  position: fixed;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>

<div class="robig"></div>

<div class="foo"></div>

但是，如果您尝试重新创建粘贴效果，我建议您使用 position: Sticky 因为这不需要 jquery:

body {
  margin: 0;
}

.foo {
  height: 140vh;
  background: black;
}

.robig {
  width: 100%;
  height: 10vh;
  background: lime;
  position: sticky;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>

<div class="robig">Stop at top</div>

<div class="foo"></div>