向下滚动页面时如何添加CSS类

Question

当向下滚动和height = 400时，如何添加CSS display：unset;

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

我用这个来获得高

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

Answer 1

您需要侦听滚动事件，然后计算已滚动了多少高度。 之后，当滚动高度达到400时，添加css。 示例代码如下，

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

Answer 2

这是带有演示的代码。 请看一看。

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