使用jQuery滚动页面时添加引导类

Question

我在使用jQuery时遇到问题。

在滚动页面时，我想添加fixed-top类（引导程序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>

Answer 2

您的代码仅在页面加载时运行，但是您需要在窗口的for (auto const & value : values) {事件中运行代码

scroll

您还可以简化代码并改用$(window).scroll(function(){ var scroll = $(window).scrollTop(); if (scroll >= 500) $(".robig").addClass("fixed-top"); else $(".robig").removeClass("fixed-top"); });

.toggleClass()

$(window).scroll(function(){
  $(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});

$(window).scroll(function(){
  $(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});

p {height: 500px}
.robig {
  width: 100%;
  background: red;
}
.fixed-top {
  position: fixed;
  top: 0;
}

Answer 3

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