How do I make a div move up and down when I m scrolling the page

Question

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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just add position  fixed  in your div style   I have checked and Its working fine in my code

User · Answer

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    gt  Height of Header         begin to scroll         div   css  position   fixed            div   css  top  0     else        lock it back into place         div   css  position   relative

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to html