CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Rashkov
Alex Rashkov

Reputation: 10015

How to make a div scroll when I scroll after certain point?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page. I know I've seen at least one example of this online but I cannot remember it for the life of me.

Any thoughts?

Upvotes: 4

Views: 2163

Answers (1)

gblazex
gblazex

Reputation: 50109

[Working demo]

var el  = $("#sticky");
var win = $(window);
var width  = el.width();
var height = el.height();
var win_height = $(window).height();

window.onscroll = function() {
  var offset = el.offset().top + height - win_height;
  if ( win.scrollTop() > offset ) {
    window.onscroll = function() { 
      el.css({
        width: width,
        position: "absolute",
        top: win.scrollTop() + win_height - height
      });
    };  
  }
};

If you don't need to support IE based browsers you can use:

position: "fixed"
bottom: 0

Upvotes: 1

Related Questions