随主要内容滚动的侧边栏答案

【问题标题】：Sidebar which scrolls with the main content随主要内容滚动的侧边栏
【发布时间】：2012-08-23 12:06:48
【问题描述】：

如何实现侧边栏，它位于页面某处，当用户向下滚动页面时，它会改变位置并随着主要内容滚动，始终保持可见？

这是example（请向下滚动）

天哪！我只需要指定以下样式（这对我来说不太明显）：

.affix {
    position: fixed;
}

当然，还要添加 jQuery：

$('.leftnav').affix();

非常感谢所有试图帮助我的人！

【问题讨论】：

@epascarello Khm，是的，可能......但首先它从顶部定位N px，然后从顶部将位置更改为M px。还是fixed position 只依赖于父元素？
类似这样的东西：stackoverflow.com/questions/6984645/…。您提供的示例不适用于 iPad 上的 safari。
@Edward Ruchevits：请参阅下面的答案：谢谢！

标签： javascript css twitter-bootstrap positioning

【解决方案1】：

查看您链接到的页面的来源。该解决方案涉及在用户向下滚动时更改为固定位置，刚好够菜单的上边缘到达屏幕的上边缘（这是通过收听scroll 事件来完成的）。最初（提供页面时）菜单没有固定位置。

编辑：或者更好...这里的脚本可以做到这一点http://twitter.github.com/bootstrap/javascript.html#affix ;)

【讨论】：

【解决方案2】：

试试position: fixed:

http://jsfiddle.net/FlameTrap/mfyAc/

** 编辑 **

试试这个：

http://jsfiddle.net/FlameTrap/Wqb3g/1/

【讨论】：

【解决方案3】：

您需要监听每个滚动事件，并在滚动时更改元素的位置，或者在某个阈值后更改为fixed，或者不断更新：

var newPos = Math.max( startPosition, scrollTop + scrollOffset)

【讨论】：

【解决方案4】：

你看起来像这样吗

SEE DEMO

JS 代码：

        var ns = (navigator.appName.indexOf("Netscape") != -1);
        var d = document;
        function JSFX_FloatDiv(id, sx, sy)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            var px = document.layers ? "" : "px";
            window[id + "_obj"] = el;
            if(d.layers)el.style=el;
            el.cx = el.sx = sx;el.cy = el.sy = sy;
            el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
        
            el.floatIt=function()
            {
                var pX, pY;
                pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
                document.documentElement && document.documentElement.clientWidth ? 
                document.documentElement.clientWidth : document.body.clientWidth;
                pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
                document.documentElement.scrollTop : document.body.scrollTop;
                if(this.sy<0) 
                pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
                document.documentElement.clientHeight : document.body.clientHeight;
                this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
                this.sP(this.cx, this.cy);
                setTimeout(this.id + "_obj.floatIt()", 40);
            }
            return el;
        }

HTML：

<div id="main">
    <div id="divTopLeft" style="position:absolute">
        <script>JSFX_FloatDiv("divTopLeft", 10,30).floatIt();</script>
        <ul>
            <li id="img1">Image 1</li>
            <li id="img2">Image 2</li>
            <li id="img3">Image 3</li>
            <li id="img4">Image 4</li>
        </ul>
    </div>
</div>

CSS：

    #main {
        width: 1280px;
        height:720px;
        background: url(http://www.designworks.com.pk/example/background/images/1.jpg) left top no-repeat;
        margin: 0;
        position:relative;
        z-index:2;
    }
    ul { margin:20px; display:inline-block; }
    ul li { cursor:pointer; list-style-type: none; color: #fff; background:#000; border:1px solid #fff; font-size:16px; font-weight: bold; padding: 5px; margin:2px 0 0 0;  }
    ul li#img1 { background:#F90; }

【讨论】：