Fix or modify an element on page at a scroll position

Fix a second header as main header on scroll down or any animation or event at a specific scroll position. You can add more if statements to produce stepping(parallax) effects.


/*css*/
.fixed{
    width:100%;
    position:fixed;
    top:0;
    left:0;
}


//jquery
$(window).on('scroll', function () {
    var position = Math.round($(window).scrollTop());         
    if (position > 100) {
        $("div.column-map").addClass("fixed");
    } 
    else {
        $("div.column-map").removeClass("fixed");
    }
});

Be the first to comment “Fix or modify an element on page at a scroll position”

This site uses Akismet to reduce spam. Learn how your comment data is processed.