Keep element in view while scrolling using jQuery

转载自：http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

I’ve just completed an interesting project; an online application form that calculated a quote dynamically using Javascript as the user specified their choices.

=====================================================================
UPDATE APRIL 2011 – Due to the overwhelming feedback on this blog post I have created the jScroll plugin which you can download here. You can also fork and contribute to its development at github. If you use the plugin I’d love to hear from you!
=====================================================================

The quote details where to be displayed to the right of the form, but the form was longer than the height of the page so scrolling was required. In order to keep the quote price visible at all time I needed a way to make the element container reposition itself to remain in view when the user scrolled up and down on the form.

I actually thought the solution would be a single search away on Google, but I couldn’t believe that there was no quick answer available. A few people had suggested a css version using position:fixed, but due to the structure of my css and the fact that I wanted a smooth scrolling effect on the element the css idea just didn’t cut it.

I knew jQuery was going to produce my answer, but nobody seemed to have anything available to tell me how. I ended up writing my own against the jQuery framework, which actually proved extremely easy. Hopefully if your looking for something similar this will meet your needs. You can view the working demo here. Ok, lets get started.

First thing to do is make sure you have the jQuery library included on your page. This is super easy to do. If you haven’t got it yet download the production file (19kb) fromwww.jquery.com. Then simply include it on your page using a script include in your head section.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

Next up, give the element that will be dynamically repositioned an id so that it can be found in the DOM. This again is super easy.

<div id="scrollingDiv"> <--- notice the id tag
       Your content in here
</div>

Now that we have the basics done we need to write the code to reposition the element dynamically using JQuery. This is the technical bit, but I’ll try break it down so it’s easy to understand.

We need to listen out for, and handle, the scroll event. Basically every time the user scrolls their browser window it alerts any code that has registered interest in this event that it has just happened. We will reposition the element when this happens, so this is perfect for us! To do this we use JQuery’s event handling support to attach a function to the window’s scroll event.

$(window).scroll(function() {
       do stuff here...
});

Now that we are being alerted that the scroll event has fired we need to actually do something. The code below does a few things.

1. jQuery traverses the DOM and returns the element who’s id is scrollingDiv
2. We call JQuery’s animate function on the returned element and tell it to increase the top margin to the size of the top scroll location (I’ve added 30 to the total because I already have a top margin of 30 on the div. You can remove this if you do not have a top margin already on your div). We also set the animation speed to slow. You can set this to fast, or specify a numerical value in milliseconds if you prefer.

$(window).scroll(function(){
       $("#scrollingDiv")
              .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});

Because this event can fire many times in a row we need to make sure we stop all previous repositions before progressing with the latest one. Imagine a users scrolls 3-4 times really fast. We want just the last call to be in control of the repositioning. Ensuring that all repositioning is stopped beforehand makes for much faster handling of the event, resulting in smoother animation. We call this BEFORE the code snippet above.

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

Our element now scrolls along with the window. There is one area we can still make this a little smoother though. Whenever the scroll event fires jQuery traverses the DOM looking for our element. In order to alleviate this overhead we can simply store the jQuery reference to our element in a variable when the DOM is initialised and reference this instead.

var $scrollingDiv = $("#scrollingDiv");
 
$(window).scroll(function(){
       $scrollingDiv
              .stop()
              .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});

That’s all there is to it. You now have an element that scrolls smoothly into position so that it remains in view at all times. I’ve tested the code in IE6, IE7 and Firefox 3, every one of which works a treat. The complete code snippet is included below. Enjoy!

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
 $().ready(function() {
  var $scrollingDiv = $("#scrollingDiv");
 
  $(window).scroll(function(){   
   $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );   
  });
 });
</script>