Question

如何添加css display：向下滚动时取消设置，高度= 400;

  <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

以下是带有demo的代码。请看看。

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

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

2 个答案: