jquery addClass / removeClass不使用header

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;
  });
});

我不知道你想用你的fadeIn / fadeOut鏈接做什么，抱歉

Démo： https ： //jsfiddle.net/ox8L0tfd/