Question

我有一个固定标题作为导航栏。因此，当我滚动“仅在索引页面中”或=到- if defined?(Timecop) && Timecop.top_stack_item = javascript_include_tag "testing/sinon-1.17.3.js" - unix_millis = (Time.now.to_f * 1000.0).to_i :javascript sinon.useFakeTimers(#{unix_millis});时，标题会从200px更改为background: none;，我想添加一个带 jquery的影子类当background: #FFF;时。但滚动后更改不适用，但是当我检查元素时，我发现该类已经添加到标题中。另一方面，当我将其添加到另一个元素并滚动时，同一个类适用。

任何想法的人！好像我的代码很棒，但有些东西不见了。

以下是我的代码：

HTML：

scroll>=200px

JS：

<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>

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/

jquery addClass / removeClass不使用header

1 个答案: