Question

我正在寻找一个固定的侧边栏，与Apple的功能非常相似（在功能方面）。当你在他们的商店中配置你的mac时，当你向下滚动页面时，右边的篮子是固定的; 完全

position:fixed是相对于视口而不是它的父容器，所以在后台进行什么样的脚本来完美地定位侧边栏？

（强调完美）。 http://store.apple.com/uk/buy-mac/mac-pro?product=ME253B/A&step=config#

Answer 1

使用position:sticky完成。

.slider-content #secondary.sticky { position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 10px; z-index: 1; margin-bottom: 0; }

您可以阅读更多相关信息here

Answer 2

在另一篇文章中找到了这个：

http ://jsfiddle.net/63cFy

( source: http://stackoverflow.com/a/19317397/3378288 )

正如我在您的示例页面上看到的那样，苹果正在做同样的事情。当有人向下滚动而不再在视图中时，他们会向元素添加一个类。在这种情况下的定位是相对于“wrap”div容器。

Answer 3

我已经通过切换“固定”来完成了这项工作。和绝对的＆＃39;关于文件的主体scrollTop。

function scrollFunction() {
    var scrollPos = document.body.scrollTop;

    if (scrollPos > 40) {
        document.getElementById("fixed-floater").style.position = "fixed";
        document.getElementById("fixed-floater").style.top = "0px";
    } else {
        document.getElementById("fixed-floater").style.position = "absolute";
        document.getElementById("fixed-floater").style.top = "40px";
    }
}

window.onscroll = scrollFunction;

http://jsfiddle.net/ua4fhrzy/

如果有人有兴趣，我试图避免使用jquery。

Answer 4

结帐Bootstrap affix。它也是正确菜单中使用的内容。

固定浮动侧边栏

4 个答案: