Question

在向上滚动页面时尝试将类.darkHeader添加到.nav。滚动向下时不会添加任何类，在滚动向下滚动页面时将添加类，向下滚动时删除。

jQuery的：

$(window).scroll(function() {
    var scroll = $(window).scrollDown();

    if (scroll >= 100) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
});

HTML

<div class="nav">
Sticky top navigation bar
</div>
<div class="wrap">
<h3>Some filler text</h3>
<p>Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger.
Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa.
Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.</p>
</div>

小提琴：http://jsfiddle.net/oycv4hba/1/

但它不起作用。有什么方法只在Scroll Up页面添加类？（仅限jQuery）

Answer 1

看起来没有scrollDown方法。

我只是做一个测试，似乎使用此代码可以达到您的目的：

var scroll = $(window).height() - $(window).scrollTop();

确保在向上滚动时只添加课程：

var previousScrollPos = 0;
//add this boolean flag to speed up the performance a bit...
var navAdded = false;
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if(scroll - previousScrollPos < 0 && !navAdded)
    {    
        navAdded = true;
        $(".nav").addClass("darkHeader");
    } else if(navAdded) {
       navAdded = false;
        $(".nav").removeClass("darkHeader");
    }
    previousScrollPos = scroll;
});

你的css有问题，它不会导航。请参考其他答案。

JSFiddle已更新

Answer 2

首先：正如xwhyLikeThis所说没有scrollDown

使用此

// Script
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
});

第二，你应该添加错误的css安排！重要

.darkHeader {
    background-color: black !important; 
    position: fixed;
}

或.nav class

之后添加.darkHeader类

DEMo HERE

Answer 3

试试这个应该有效

 $(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll <= 100) {
    $(".nav").addClass("darkHeader");
}
else{

    $(".nav").removeClass("darkHeader");
}
 });

Answer 4

jQuery中没有名为scrollDown()的函数。使用scrollTop()。

var scroll = $(window).scrollTop();

您还需要将!important添加到.darkHeader课程。

.darkHeader {
  background-color: black !important;  
}

此外，我认为您需要position:fixed才能看到nav。

.nav {
  width: 100%;
  background-color: wheat;
  padding: 10px;
  position:fixed; //Fixed
}

同时将表达式更改为

 if (scroll <= 100) {

的 Updated Fiddle 的

向上滚动页面时添加类

4 个答案: