CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sandbox
sandbox

Reputation: 2679

Making a Div fixed on Scrolling

How to make a div fixed on detection of Scrolling by the Users.
Example: Right Sidebar of Facebook, it gets stuck when a certain scroll position is attained.

Upvotes: 7

Views: 23351

Answers (4)

Nikita Seleckis
Nikita Seleckis

Reputation: 94

It seams you are looking for position: sticky;.

Learn more: https://css-tricks.com/position-sticky-2/

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

Monitor whether or not we're scrolling.

if($(window).scrollTop() > 0){
  //we're scrolling our position is greater than 0 from the top of the page.
  $("#element").css({'position' : 'fixed'});
}

*EDIT

Do it without jQuery..

if(window.scrollTop() > 0){
  document.getElementById('element').style.position="fixed";
}

Upvotes: 5

Volmar
Volmar

Reputation: 420

Not sure if this is what you mean?

But you can add the CSS-propery position: fixed; to it to make it appear on the sam place even after scrolling.

More on CSS positioning

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46549

position:fixed is the answer.
But you can always look at a website's source if you want to know how they do something. Very educational!

Upvotes: 8

Related Questions