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.

Answers:

Answer

As a slight alternative to Adam Hutchinson's

http://jsfiddle.net/HelloJoe/JjuQu/

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

Answer

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

Answer

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.

$(document).scroll(function(){
    $('#divtomove').css('top', $(document).scrollTop());
})
Answer

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) {
                $scrollingDiv.stop().animate({
                    "marginTop": ($(window).scrollTop() - 500) + "px"
                }, "slow");
            }
        } else {
            $scrollingDiv.stop().animate({
                "marginTop": "0px"
            }, "slow");
        }
    });
Answer

Simpler solution:

$('#divtomove').scrollFollow();

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.