[英]Scrolling floating/sliding sidebar issue
我已经浏览了与我所面临的内容相关的所有内容,但仍无法解决。
我正在尝试做的是:
我得到的是:
这是脚本(改编自慷慨的乔登·米尔斯):
<script type="text/javascript">
function animate_box() {
var offset = -15; /* set this to the starting margin-top in the css */
var element = document.getElementById('animate_box');
if(element) {
var top = Number(String(element.style.marginTop).substring(0,String(element.style.marginTop).indexOf('px')));
try {
if(document.body.scrollTop > 500) {
var difference = (document.body.scrollTop + offset);
} else if(document.documentElement.scrollTop > 0) {
var difference = (document.documentElement.scrollTop + offset);
} else {
var difference = offset;
}
} catch(e) {
var difference = offset;
}
difference = difference - top;
if(difference > 200) {
element.style.marginTop = (top + Math.abs(Math.ceil(difference / 30))) + 'px';
} else if(difference < 190) {
element.style.marginTop = (top - Math.abs(Math.ceil(difference / 30))) + 'px';
}
}
}
window.setInterval(animate_box, 50);
</script>
我建议使用另一种方法:
像这样:
$(function() {
var backup_position_toolbar = $('#sidebar').offset().top;
$(window).scroll(function() {
if ( $('#sidebar').offset().top - $(window).scrollTop() < 0) $('#sidebar').addClass('fixed');
if ( $(window).scrollTop() < backup_position_toolbar ) $('#sidebar').removeClass('fixed');
});
});
请注意,我使用的“固定”类定义如下:.fixed {position:fixed; 最高:0; }
这使菜单更加可用。 如果要在某个点上阻止侧栏,则可以添加更多的逻辑(即,当底部太近时)。 这样,您无需设置数值(500、200等)。
但是,如果您不费吹灰之力就尝试使用带“缀”的引导程序(请看左侧菜单,这就是您想要的) http://twitter.github.com/bootstrap/javascript.html#affix
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.