Добавить класс начальной загрузки при прокрутке страницы с помощью jquery

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

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

Answer 2

Ваша переменная 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 3

Ваш код запускается только при загрузке страницы, но вам нужно запустить код в 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;
}

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