How to make <div> up and down while scrolling a page?

Question

How can I make the div element move up and down the page when the user scrolls the page? (where this element is always visible)

Answer 1

You want to apply a fixed property to the position style of an element.

position: fixed; 

Which browser do you work in? Not all browsers support a fixed property. Find out more about who supports him, who doesn't work and doesn't work here.

http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html

Answer 2

Just for a more animated and cute solution:

 $(window).scroll(function(){ $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" ); }); 

And a pen for those who want to see: http://codepen.io/think123/full/mAxlb and fork: http://codepen.io/think123/pen/mAxlb

Update: and the non-animated jQuery solution:

 $(window).scroll(function(){ $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"}); }); 

Answer 3

using only position:fixed is great when you don’t have a heading or logo at the top of the page. This solution will take into account how far the window scrolls and moves the div when scrolling your title. Then it will lock in place again when you return upstairs again.

 if($(window).scrollTop() > Height_of_Header){ //begin to scroll $("#div").css("position","fixed"); $("#div").css("top",0); } else{ //lock it back into place $("#div").css("position","relative"); } 

Answer 4

Just add position: fixed; into your div style.

I checked and worked fine in my code.

Answer 5

Here is the jQuery code

 $(document).ready(function () { var el = $('#Container'); var originalelpos = el.offset().top; // take it where it originally is on the page //run on scroll $(window).scroll(function () { var el = $('#Container'); // important! (local) var elpos = el.offset().top; // take current situation var windowpos = $(window).scrollTop(); var finaldestination = windowpos + originalelpos; el.stop().animate({ 'top': finaldestination }, 1000); }); }); 

Answer 6

You might want to check out Remy Sharp's recent article on fixed floating elements in jQuery for designers , which has a good video and a record on how to apply this effect in a client script