javascript - Add class when Scroll Up the page -
trying add class .darkheader
.nav
when scroll page. means no class add when scrolling down, class add while scroll page after remove when scrolling down.
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/
but it's not working. way add class when scroll page? (only jquery)
first : xwhylikethis said there no scrolldown
use this
// script $(window).on('scroll',function() { var scroll = $(window).scrolltop(); if (scroll >= 100) { $(".nav").addclass("darkheader"); } else { $(".nav").removeclass("darkheader"); } });
2nd have bad arrangement in css should add !important
.darkheader { background-color: black !important; position: fixed; }
or add .darkheader class after .nav class
Comments
Post a Comment