如何实现位于页面某处的侧边栏,当用户向下滚动页面时,它会更改定位并滚动主要内容,始终保持可见状态?
这是example(请向下滚动)
.affix {
position: fixed;
}
当然,要添加jQuery:
$('.leftnav').affix();
非常感谢大家,他们试图帮助我!
答案 0 :(得分:1)
检查您链接到的网页的来源。解决方案涉及更改为固定在用户向下滚动的位置,足以使菜单的顶部边缘到达屏幕的上边缘(通过监听scroll
事件完成)。最初(当提供页面时)菜单没有固定位置。
编辑: 或者更好......这里的脚本只会http://twitter.github.com/bootstrap/javascript.html#affix;)
答案 1 :(得分:1)
尝试position: fixed
:
** 编辑 **
试试这个:
答案 2 :(得分:0)
您需要收听每个滚动事件,并在滚动时更改元素的位置,在阈值后更改为fixed
,或者不断更新:
var newPos = Math.max( startPosition, scrollTop + scrollOffset)
答案 3 :(得分:0)
你看起来像这样吗
JS CODE:
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; }