基本上我想做的是始终将我的博客文章的元信息显示在屏幕上。实际上,元信息(标题、作者等)显示在帖子内容的左侧,我将其设置为向下滚动时元信息在屏幕上平滑显示的位置。但是,我遇到了一个问题:
我无法让它在#comments DIV 上顺利滚动不。它要么重叠要么跳动,具体取决于我如何调整代码。
这是我正在使用的 JS 函数:
function brazenlyScroll() {
var element = jQuery(".single-post .headline_area");
var top = element.offset().top - 50;
var elementHeight = 26 + element.height();
var maxTop = jQuery("#comments").offset().top - elementHeight;
var scrollHandler = function() {
if (jQuery(document).width() > 1035) {
var scrollTop = jQuery(window).scrollTop();
if (scrollTop<top) {
element.css({position:"relative",top:""})
} else if (scrollTop>maxTop) {
element.css({position:"absolute",top:(maxTop+"px")})
} else {
element.css({position:"fixed",top:"50px"})
}
}
}
jQuery(window).scroll(scrollHandler);
jQuery(window).resize(scrollHandler);
scrollHandler();
}
该代码通过外部 JS 文件包含,并在页面底部调用。您可以在此处查看所有这些操作:http://www.rickbeckman.org/dumber-and-dumber-and-dumber/
如有任何帮助,我们将不胜感激。
最佳答案
当元 block 达到 maxTop 时,您可以通过给它一个 300px 的填充来使评论 div 向右收缩。
关于javascript - 如何平滑地防止固定元素滚动到指定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17396887/