Добавить класс при прокрутке вверх

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> 

Fiddle: http://jsfiddle.net/oycv4hba/1/

Но это не работает. Любой способ добавить класс только при прокрутке страницы? (только 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

Попробуйте это, он должен работать

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

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

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

Answer 3

первый: а xwhyLikeThis сказал нет Прокрутите вниз

использование этого

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

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

второй у вас есть плохо расположение в css you s hould добавить! важный

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

или добавить .darkHeader класс после .nav класса

DEMo HERE

Answer 4

Там нет функции называется scrollDown() в JQuery. Используйте 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