How to add css class when scrolling down page

Question

How can I add css display:unset when scroll down and height = 400 ;

  <nav class="navbar navbar-expand-lg bg-warning fixed-top navbar-transparent" color-on-scroll="400"  style="display: none;">
</nav>

I use this to get hieght

const height = $(window).height();
const scrollTop = $(window).scrollTop();
console.log(scrollTop);

Could you please include what you have tried? Stackoverflow is not a code writing service. — Joe Lissner
– Joe Lissner, Commented Nov 4, 2017 at 11:03

Ankit Agarwal · Accepted Answer · 2017-11-04 11:03:23Z

4

You need to listen for the scroll event and then calculate how much height has been scrolled. After that, when the scrolled height meets 400 add your css. The sample code is as follows,

$(window).scroll(function(){
    if($(this).scrollTop()>= 400){           
        $('.navbar.navbar-expand-lg').css('display','unset');
    }
});

answered Nov 4, 2017 at 11:03

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shiladitya · Accepted Answer · 2017-11-04 15:45:03Z

2

Here is the code with demo. Please have a look.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 400)
    $('nav').addClass('nav-color');
  else
    $('nav').removeClass('nav-color');
});

.nav-color {background: #ff0000; position:fixed; top:0;left:0;right:0; padding:15px; z-index:1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg bg-warning fixed-top navbar-transparent">Test
</nav>
<img src="http://photo.akmall.com/editor/goods_desc/71/90/06/14/71900614/20150502210521_K146976_BLE_1.jpg" />

edited Nov 4, 2017 at 15:45

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Nov 4, 2017 at 11:09

Awadhesh verma

5404 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to add css class when scrolling down page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related