CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4
danko12
danko12

Reputation: 79

Add bootstrap class when scrolling the page using jquery

I have a problem with jQuery.

I want to add the fixed-top class (Bootstrap 4) when scrolling the page, but this is not the case.

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

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

Can you see what I'm doing wrong?

Upvotes: 0

Views: 387

Answers (4)

smdhkv
smdhkv

Reputation: 187

You need to window scroll event. You can try below code

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

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

Your code run on page load only but you need to run your code in scroll event of window

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

Also you can simplify the code and use .toggleClass() instead

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

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50854

Your scroll variable is never being updated. You need to add your code into a scroll event like so:

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>

However, if you are trying to recreate a sticking effect, I suggest you use position: sticky as jquery isn't needed for this:

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>

Upvotes: 3

Moumen Soliman
Moumen Soliman

Reputation: 1674

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

Upvotes: 0

Related Questions