How to make element scroll with you on page?

问题

I would like to create an element on a website that scrolls as you scroll down the window. In most cases, I know this could easily be solved with some basic css using fixed positioning. The issue is, I would not like it to be in the same space on the screen at all times. I would like it to be a sidebar element that starts with the rest of the content, but then moves with you as you scroll down the page. See http://www.demonoid.com/ for an example (see the ad on the right side of the page). I know there is probably a fairly easy css or jquery solution, but I have not been able to think of one. I appreciate the help.

Thanks!

回答1:

Here's a really great tutorial to create fixed-floating elements using jQuery:

Fixed Floating Elements | jQuery for Designers

回答2:

Maybe just a

   if($(window).scrollTop>300) {

        $("#image").position().top($(window).scrollTop()-$(window).height());

   }

回答3:

Here is a way to make it.

use position:sticky to get element floating.

Here is the article explained.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

sticky position demo

来源：https://stackoverflow.com/questions/3774882/how-to-make-element-scroll-with-you-on-page