Making a Div fixed on Scrolling

Question

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.

Answer 1

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!

Answer 2

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";
}

Answer 3

我遇到过这篇文章，其中介绍了一种解决方案https://www.virendrachandak.com/techtalk/make-a-div-stick-to-top-when-scrolled-to/

Answer 4

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

Answer 5

It seams you are looking for position: sticky; .

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

Answer 6

http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

uses jQuery with a scroll lock plugin: https://gist.github.com/837729