CODEWITHSUNDEEP
jquerycss
Joricam
Joricam

Reputation: 87

Div that follows scroll (not position:fixed)

I found it sometime ago and now I can't. I want to find something like the shopping cart at the apple store, it's a div thats not positioned absolute nor fixed, for instance, let's say it's at the center of the screen, and only when you scroll down it follows the scroll only to not disappear, when it reaches the border of the browser header...

I'm not sure If i'm being clear. I've searched but all I found is the css position fixed stuff.

Can you help me with a link or something?

Best Regards

Upvotes: 1

Views: 8587

Answers (4)

Ionut Grecu
Ionut Grecu

Reputation: 38

The problem is with those divs that have height greater than the visible area height. So I wrote the script below.
Put the sidebar id that you want and the id of the div that will stop the div following, like the footer. You will notice how useful this function is if the div has greater height than the window. I don't know why, but it works great only as inline javascript, not external.

$(function () {
var $sidebar = $("#sidebar"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 5,
        $stopelement = $("#footer");

var lastScrollTop = 0;

$window.scroll(function () {
    if ($window.width() > 750) {
        if ($window.scrollTop() > lastScrollTop) {
            //down
            var addtotopposition = ($window.scrollTop() + $window.height()) - ($sidebar.height() + offset.top) + topPadding;
            if ($window.scrollTop() + $window.height() > offset.top + $sidebar.height()) {
                if (offset.top + addtotopposition + $sidebar.height() < $stopelement.offset().top) {
                    $sidebar.stop().animate({
                        marginTop: addtotopposition
                    });
                }
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        } else {
            //up
            var offset_top = offset.top + parseInt($sidebar.css("margin-top"));
            //console.log(offset_top + " + " + topPadding + ">" + $window.scrollTop());
            if (offset_top + topPadding > $window.scrollTop()) {
                var addtotopposition = Math.max($window.scrollTop() - offset.top + topPadding, 0);
                //console.logconsole.log(offset_top + "-" + addtotopposition + ">0");
                if (offset_top - addtotopposition > 0) {
                    $sidebar.stop().animate({
                        marginTop: addtotopposition
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: 0
                    });
                }
            }
        }
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
    lastScrollTop = $window.scrollTop();
});

});

Upvotes: 0

kongaraju
kongaraju

Reputation: 9596

May be it is helpful to you. This is new approach with css3. use position:sticky to follows the scroll.

Here is the article explained.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

and old way of doing this demo

with sticky position demo

Upvotes: 0

bigspotteddog
bigspotteddog

Reputation: 1447

This demo shows exactly what you are looking for:

http://jsfiddle.net/y3qV5/

Here is the link to the jquery plugin that does this:

https://github.com/bigspotteddog/ScrollToFixed

I am assuming you are saying that you "...have no chance whatesover to code this" because you do not know javascript. Please excuse me if I assumed wrong. Here is the what you would paste into your html page:

Here is the usage:

<head>
    <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-scrolltofixed.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#cart').scrollToFixed({ marginTop: 10 });
        });
    </script>
</head>

Change '#cart' to whatever you have named your element.

Upvotes: 3

Fortega
Fortega

Reputation: 19702

The app store uses the following css:

div.cto div.slider-content {
    height: 100%;
    overflow: visible;
    padding-bottom: 20px;
    position: absolute;
    right: 0;
    top: -10px;
    width: 169px;
}

div.cto div.pinned_top div#secondary {
    position:absolute;top:0;right:0;
}

div.cto div.floating div#secondary {
    position:fixed;top:0;
}

Using javascript, the class of the div is changed from 'pinned_top' to 'floating' when you scroll down.

About the javascript:

Upvotes: 7

Related Questions