0

我正在尝试在站点的固定导航栏到达某个部分时为其添加阴影。谁能解释为什么这不起作用？

在我的 .CSS 中，

.whiteDropShadow {
-moz-box-shadow: 0 0 10px #FFFFFF; 
-webkit-box-shadow: 0 0 10px #FFFFFF;
-o-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
}

在我的 .JS 中，

$(function() {

// Initial top offset from ABOUT section
var topOffset = $('#about').offset().top;

// FUNCTION: adds class to #navLinks when vertical distance from the top is larger than the initial top offset.
var editNavBar = function(){
    var verticalDistance = $(window).scrollTop(); // Current vertical distance from the top

    if (verticalDistance > topOffset) { 
        $('#navLinks').addClass('.whiteDropShadow');
    } else {
        $('#navLinks').removeClass('.whiteDropShadow');
    }
};

// Run upon scrolling
$(window).scroll(function() {
     editNavBar();
});

});

4

2 回答 2

1

我在这里工作。我刚刚注销了您的值，以确保您可以滚动足够远以达到条件。也添加#navLinks到您的whiteDropShadow选择器中。

我会仔细检查您是否能够在页面上滚动足够长的时间以使您的条件真实。

http://jsfiddle.net/y2zu5cwn/

<div id="navLinks">
    <a href="#">item1</a>
    <a href="#">item 2</a>
    <a href="#">item 3</a>
</div>

<div class="container">
    <div id="spacer">
        <p>Just for space</p>
    </div>

    <div id="about">
        <p>about</p>
    </div>    
</div>

// Initial top offset from ABOUT section
var topOffset = $('#about').offset().top;

// FUNCTION: adds class to #navLinks when vertical distance from the top is larger than the initial top offset.
var editNavBar = function(){
    var verticalDistance = $(window).scrollTop(); // Current vertical distance from the top
    console.log( verticalDistance, topOffset );


    if (verticalDistance > topOffset) { 
        $('#navLinks').addClass('whiteDropShadow');
    } else {
        $('#navLinks').removeClass('whiteDropShadow');
    }
};

// Run upon scrolling
$(window).scroll(function() {
     editNavBar();
});

#navLinks {
    position: fixed;
    top: 0;
    width: 100%;
    height: 20px;
    background: #aeaeae;
}



#navLinks a { color: #000;}

#navLinks.whiteDropShadow {
-moz-box-shadow: 0 0 10px #FFFFFF; 
-webkit-box-shadow: 0 0 10px #FFFFFF;
-o-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
}

.container { height: 1400px; }

#spacer {
    display: block;
    height: 500px;
    background: green;
}

#about {
    display: block;
    height: 500px;
    background: red;
}
于 2014-10-14T21:56:45.483 回答
1

jquery-waypoints

这是一个我用它来做的网站... http://cardbinder.herokuapp.com/card_sets/magic-2014/cards

您基本上选择一个元素作为触发器，然后当该元素击中屏幕的顶部（或底部）（或与其偏移）时，该元素会添加一个类。那时你可以自由地做你想做的事。我使用相同的库在同一页面上延迟加载图像。

于 2014-10-14T22:12:45.687 回答