跟随滚动的 div（不是位置：固定）答案

【问题标题】：Div that follows scroll (not position:fixed)跟随滚动的 div（不是位置：固定）
【发布时间】：2014-09-28 20:01:27
【问题描述】：

我前段时间找到了，现在找不到了。我想在苹果商店找到类似购物车的东西，它是一个既不是绝对定位也不是固定的 div，例如，假设它位于屏幕的中心，只有当你向下滚动时它才会跟随滚动而不是消失，当它到达浏览器标题的边框时...

我不确定我是否清楚。我已经搜索过，但我发现的只是 css 位置固定的东西。

你能帮我提供一个链接吗？

最好的问候

【问题讨论】：

标签： jquery css

【解决方案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/

【讨论】：

我几乎肯定这只适用于 jquery 而不仅仅是 css
@Ricardo 您需要 Javascript 来切换类。没有 Javascript 就无法做到这一点。 CSS 定义样式，Javascript 定义行为。（+1 顺便说一句）
是的，但是我没有机会编写这个代码，我已经在某个地方看到过这个，一个教程或一个脚本，但我找不到它：S 有人可以在你最喜欢的资源博客上查看它还是什么？

【解决方案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”更改为您为元素命名的任何名称。

【讨论】：

【解决方案3】：

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

这里是文章的解释。

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

老方法demo

sticky position demo

【讨论】：

【解决方案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();
});

});

【讨论】：