ページをスクロールダウンするときのCSSクラスの追加方法

Question

CSS表示を追加するにはどうすればよいですか？

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

は私がhieght

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

Answer 1

あなたはscrollイベントをリッスンして、スクロールされたどのくらいの高さを計算する必要が取得するためにこれを使用します。その後、スクロールした高さが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" />