Div that follows scroll (not position:fixed)

后端未结

关注

 4  1780

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,

相关标签:

4条回答

甜味超标

2021-01-23 22:31

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

});

0 讨论(0)

悲哀的现实

2021-01-23 22:39
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:
- To determine the number of pixels scrolled: $('html').scrollTop()
- To listen to scroll events: http://api.jquery.com/scroll/
0 讨论(0)
发布评论:

提交评论
- 加载中...
抹茶落季

2021-01-23 22:39

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2021-01-23 22:40
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...