CODEWITHSUNDEEP
javascriptjquerycsshtml
The Unknown
The Unknown

Reputation: 19694

How do I make a <div> move up and down when I'm scrolling the page?

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)

Upvotes: 65

Views: 206231

Answers (6)

Bob
Bob

Reputation: 99684

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

Upvotes: 89

Zerium
Zerium

Reputation: 17333

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

Upvotes: 68

chandrgupt
chandrgupt

Reputation: 41

Just add position: fixed; in your div style.

I have checked and Its working fine in my code.

Upvotes: 4

Alireza Masali
Alireza Masali

Reputation: 688

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

Upvotes: 5

lmno
lmno

Reputation: 1044

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

Upvotes: 14

Russ Cam
Russ Cam

Reputation: 125488

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

Upvotes: 3

Related Questions