jquery addClass/removeClassがヘッダで動作しない

Question

私はナビゲーションバーとして固定ヘッダを持っています。したがって、「インデックスページのみ」以上を「200px」にスクロールすると、ヘッダーがbackground: none;からbackground: #FFF;に変更され、scroll>=200pxの場合はjqueryのシャドウクラスを追加したいと考えていました。しかし、変更はスクロール後には適用されませんでしたが、要素を調べると、クラスがヘッダーに既に追加されています。反対側では、別の要素とスクロールのために同じクラスを追加すると、同じクラスが適用されます。

アイデアみんな！私のコードは素晴らしかったようですが、欠けているものがあります。ここで

は私のコードです：

HTML：

<header> 
    <a href="<?php echo hostName() ?>"><img src="<?php echo hostName() ?>/images/icon/dark-logo.png" class="main-logo"/></a> 
    <nav> 
     <ul class="clearfix"> 
      <li><a href="#" class="search"><span></span></a></li> 
      <?php 
       if(isset($_SESSION['id']) && $_SESSION['type']=="admin") 
       { 
        ?> 
        <li><a href="<?php echo hostName() ?>/php/functions/logout.php">logout</a></li> 
        <li><a href="<?php echo hostName() ?>/admin/dashboard" class="dashboard" target="_blank">dashboard</a></li> 
        <?php 
        } 
      ?> 
      <li><a href="<?php echo hostName() ?>/about">about</a></li> 
      <li><a href="<?php echo hostName() ?>/explore">explore</a></li> 
      <li><a href="<?php echo hostName() ?>/courses">courses</a></li> 
     </ul> 
    </nav> 
</header> 

のJs：あなたが探している場合を除き

var lastScrollTop = 0; 
$(window).scroll(function(){ 
    var st = $(this).scrollTop(); 
    if (st >=200) 
    { 
     // down 
     $('.container > header').addClass("shadow").css({"background-color":"#FFF"}); 
     $("header > a").fadeIn(200); 
     } 
     else 
     { 
      //up 
      $('.container > header').css({"background":"none"}); 
      $("header > a").fadeOut(200); 
      } 
    lastScrollTop = st; 
}); 

Answer 1

まず、あなたのJSにCSSを使用していませんエラーの場合:-) そのようなクラスをトグルすることをお勧めします。

HTMLを保管してください。 CSS：

header{ 
    width: 100%; 
    background:none; 
    position: fixed; 
} 
header.shadow{ 
    background:none; 
    background-color: white; 
    box-shadow: 0px 1px 10px -3px black; 
} 

このJSです：

$(document).ready(function() { 
    var lastScrollTop = 0; 
    $(window).scroll(function(){ 
    var st = $(this).scrollTop(); 
    if (st >=200){ 
     // down 
     $('.container > header').addClass("shadow"); 
     $("header > a").fadeIn(200); 
     }else{ 
       //up 
       $('.container > header').removeClass("shadow"); 
       $("header > a").fadeOut(200); 
     } 
    lastScrollTop = st; 
    }); 
}); 

私は申し訳ありません

デモ、あなたがフェードイン/フェードアウトを使ってリンクして何をしたいのか分かりません。 https://jsfiddle.net/ox8L0tfd/