CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahoura Ghotbi
Ahoura Ghotbi

Reputation: 2896

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.

Upvotes: 1

Views: 4892

Answers (5)

Vassilis Panos
Vassilis Panos

Reputation: 1

Simpler solution: 

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

Upvotes: 0

no.
no.

Reputation: 2376

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.

Upvotes: 3

John
John

Reputation: 559

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

Upvotes: 0

Adam Hutchinson
Adam Hutchinson

Reputation: 264

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

Upvotes: 0

John
John

Reputation: 559

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

Upvotes: 0

Related Questions