Make Div Fixed After Scrolling

make div fixed after scrolling – Learn how to create a fixed/sticky header on scroll with CSS and JavaScript. The element is set to ‘fixed’ or ‘relative’ depending upon whether the user has scrolled past the element.

Contents

We will learn to how to make a div fixed on scroll like how to scroll fixed position and fixed div with scrollable content Examples.

step 1: .offset().top; get initial position of the element
step 2: $(window).scroll(function() assign scroll event listener
step 3: $(window).scrollTop(); get current position
step 4: if (activeScrl >= fixmeTop) apply position: fixed if you
step 5:
$('.menufix').css({ position: 'fixed', top: '0', left: '0' });
scroll to that element or below it
step 6: position: ‘static’ apply position: static
step 7: if you scroll above it

How to make div fixed after you scroll to that div??

var fixmeTop = $('.menufix').offset().top;       

$(window).scroll(function() {                  

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

    if (activeScrl >= fixmeTop) {           
        $('.menufix').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   
        $('.menufix').css({                     
            position: 'static'
        });
    }

});

how to make a div fixed on scroll?

how to scroll fixed position Css Code.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

fixed div with scrollable content

.fixed-content {
    overflow-y:scroll;
    overflow-x:scroll;
}

Don’t Miss : Fixed Div On Scroll Jquery Example

I hope you get an idea about make div fixed after scrolling.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

make div fixed after scrolling – How to make div fixed after you scroll to that div?