JQuery create a scroll follow div

ok I have seen people using position:fixed to have a div follow the scroll. I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :

  1. create a smooth scroll for the box
  2. scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)

an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47

but I cant figure out what they used and even if they used a library.



As a slight alternative to Adam Hutchinson's


It's pretty self explanatory but just say if you need anything explained.


This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively


Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.

    $('#divtomove').css('top', $(document).scrollTop());

Also, this is the code in the example page, just to get an idea

 var $scrollingDiv = $("#customize");
    $(window).scroll(function () {
        if ($(window).scrollTop() > 490) {
            if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
                    "marginTop": ($(window).scrollTop() - 500) + "px"
                }, "slow");
        } else {
                "marginTop": "0px"
            }, "slow");

Simpler solution:



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.