Question

我前段时间发现它现在我不能。我想在苹果商店找到像购物车这样的东西，它是一个不是绝对定位的div，例如，让我们说它位于屏幕的中心，只有当你向下滚动它才会跟随滚动而不是当它到达浏览器标题的边界时消失...

我不确定我是否清楚。我已经搜索了，但我找到的只是css位置固定的东西。

你能帮我一个链接吗？

最好的问候

Answer 1

应用商店使用以下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;
}

使用javascript，当您向下滚动时，div的类从'pinned_top'更改为'floating'。

关于javascript：

确定滚动的像素数：$('html').scrollTop()
收听滚动事件：http://api.jquery.com/scroll/

Answer 2

此演示显示您正在寻找的内容：

http://jsfiddle.net/y3qV5/

以下是执行此操作的jquery插件的链接：

https://github.com/bigspotteddog/ScrollToFixed

我假设你说你“......没有机会编写这个”，因为你不知道javascript。如果我错了，请原谅。以下是您要粘贴到html页面的内容：

以下是用法：

<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>

将'#cart'更改为您为元素命名的内容。

Answer 3

可能对你有帮助。这是css3的新方法。使用position:sticky跟随滚动。

以下是文章解释。

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

以及执行此操作的旧方式demo

sticky position demo

Answer 4

问题在于那些高度大于可见区域高度的div。所以我在下面写了这个剧本放置您想要的侧边栏ID以及将停止div的div的id，如页脚。如果div的高度大于窗口，你会注意到这个函数有多大用处。我不知道为什么，但它只能作为内联javascript，而不是外部的。

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

}）;

跟随滚动的Div（不是位置：固定）

4 个答案: