63

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

Lucas
  • 16,930
  • 31
  • 110
  • 182
The Unknown
  • 19,224
  • 29
  • 77
  • 93

6 Answers6

87

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

position: fixed;

What browser are you working with? Not all browsers support the fixed property. Read more about who supports it, who doesn't and some work around here

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

Lucas
  • 16,930
  • 31
  • 110
  • 182
Bob
  • 97,670
  • 29
  • 122
  • 130
  • 11
    @Jason, as much as I whole-heartedly agree with the sentiment, in the Corporate environment it may not be an option. Some companies can't/won't upgrade for a variety of reasons (like being held technologically hostage by a vendor... another story for another time). If s/he needs to support it then s/he needs to support it. – AnonJr Oct 28 '09 at 21:09
  • 2
    I wish I could download upvoted comments. Fire the vendor and move on, it will be well worth it. Or convince management to do so if not just for the vendor's failure to support the new browsers. – htm11h Dec 09 '13 at 20:29
  • 1
    @Jason Couldn't agree more - screw IE6 and screw microsoft frankly for putting out such rubbish W3C non-compliant browsers to torture us with! Companies will adapt if all the websites don't support it. – Amy Neville Nov 29 '14 at 12:43
67

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 a non-animated jQuery solution:

$(window).scroll(function(){
  $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});
Lucas
  • 16,930
  • 31
  • 110
  • 182
13

using position:fixed alone is just fine when you don't have a header or logo at the top of your page. This solution will take into account the how far the window has scrolled, and moves the div when you scrolled past your header. It will then lock it back into place when you get to the top 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");
}
lmno
  • 1,004
  • 1
  • 15
  • 27
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);
        });
    });
Alireza Masali
  • 668
  • 1
  • 10
  • 19
4

Just add position: fixed; in your div style.

I have checked and Its working fine in my code.

Lucas
  • 16,930
  • 31
  • 110
  • 182
chandrgupt
  • 41
  • 2
  • 3
    `position: fixed` isn't enough when you want your div to move only along with one of the scrolls, X or Y. The accepted answer is perfect. Just remove marginTop if you need only the horiz scroll. Remove marginLeft if you need only vertical. – venkatKA Dec 02 '14 at 12:14
3

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

Russ Cam
  • 124,184
  • 33
  • 204
  • 266