Add/Remove Class With Jquery Based on Vertical Scroll

Add/remove class with jquery based on vertical scroll?

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

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

Fiddle

Also, by removing the clearHeader class, you're removing the position:fixed; from the element as well as the ability of re-selecting it through the $(".clearHeader") selector. I'd suggest not removing that class and adding a new CSS class on top of it for styling purposes.

And if you want to "reset" the class addition when the users scrolls back up:

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

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

Fiddle

edit: Here's version caching the header selector - better performance as it won't query the DOM every time you scroll and you can safely remove/add any class to the header element without losing the reference:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Fiddle

Add/remove class with jquery based on vertical scroll

Is this what you were looking for?

jQuery( document ).ready(function( $ ) { $(window).scroll(function() {     var scroll = $(window).scrollTop();           if (scroll >= 1070 && scroll < 1580) {  $(".header-main").addClass("extrablack").text(scroll);     } else {  $(".header-main").removeClass("extrablack").text(scroll);     } });});

.header-main{  position: fixed;  width: 100%;  height: 100px;  background: lightgray;  color: white;  text-align: center}
.header-main.extrablack{  background: black}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="header-main"></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Add/remove class with jquery based on vertical scroll combined with fullPage.js?

If you read the fullPage.js FAQs you will see this:

jQuery scroll event doesn't work.

Same answer as Parallax doesn't work with fullpage.js

Which is:

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

There you have it. If there's no scroll bar, then you will jump from section to section so in your case, the most logical thing to do would be to use the callbacks provided by fullPage.js such as afterLoad, onLeave, afterSlideLoad or onSlideLeave.

Or, if you want to deal only with css, fullPage.js adds a class to the body depending on the section/slide the page currently is.

You could easily do something like:

body.fp-viewing-secondPage .demo{
   display:none;
}
body.fp-viewing-thirdPage .demo{
    display:block
}

JQuery Add/remove class dynamically based on scroll position AND window width

I actually solved the issue as follows below. This allows the scroll AND window values to be returned continuously. Would love to hear any thoughts if there is a more efficient strategy.

jQuery(function($){
var shrinkHeader = 200;  // Scroll value

// Add/Remove dynamic header class .shrink on scroll 
$(window).scroll(function () {
    var scroll = getCurrentScroll();
    var windowWidth = getCurrentWidth();    
        if (scroll >= shrinkHeader && windowWidth >= 1151) {
            $('.site-header').addClass('shrink');
        }
        else {
            $('.site-header').removeClass('shrink');
        }
});

// Add/Remove dynamic header class .shrink per window width
$(window).resize(function () {
    var windowWidth = getCurrentWidth();    
    var scroll = getCurrentScroll();
    if (windowWidth >= 1151 && scroll >= shrinkHeader) {
            $('.site-header').addClass('shrink');               
        }
        else {
            $('.site-header').removeClass('shrink');
        }
}); 

// Check current scroll position
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

// Check window width on load
getCurrentWidth(); 

// Return window width
function getCurrentWidth() {
    return $(window).width();
}

});

Add/Remove Class With Jquery Based on Vertical Scroll

Add/remove class with jquery based on vertical scroll?

Add/remove class with jquery based on vertical scroll

Add/remove class with jquery based on vertical scroll combined with fullPage.js?

JQuery Add/remove class dynamically based on scroll position AND window width

Related Topics

Leave a reply