Posted inJavaScript / jQuery

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

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.

make div fixed after scrolling

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype