我已经在my site上实现了CSS技巧平滑页面滚动,它运行得非常好。但是,因为我在页面顶部有一个固定的导航,当页面滚动到相应的锚div时,div的顶部会消失在导航后面。我如何偏移滚动(大约70px),以便显示整个div?我试着这样做:
var targetOffset = $target.offset().top - 70;
但这并不完全起作用。页面滚动到适当的位置,但随后立即跳回,这样div的顶部就隐藏起来了。我遗漏了什么?下面是完整的代码:
$(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top - 70;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
提前感谢您的帮助。
5条答案
按热度按时间4bbkushb1#
这种情况经常发生。我不停地寻找答案,感到沮丧,发布了一个问题寻求帮助,然后立即找到了我的问题的答案。很愚蠢。不管怎样,这里有一个解决方案给任何可能有同样问题的人。
例如,如果要将偏移量更改为70 px,请将代码更改为:
但是,除非您从代码中删除此行...
...页面将滚动到正确的位置,然后立即跳回,这样div的顶部就隐藏在页眉后面。您可以从代码中删除上面这行代码,除了URL不再更改以反映用户在页面上的位置之外,一切都将正常工作。
如果你想改变URL(我认为这是一个好主意),那么你所要做的就是改变锚div的CSS。为padding-top添加一个正值,为margin-top添加一个负值。例如:
我只有3个div,所以我只是把CSS插入到每个div中,瞧,一切都工作了。但是,如果你有很多锚div,你可以考虑创建一个.anchor类,把CSS放在那里,然后把该类应用到所有合适的div中。
我希望这对你有帮助!
i7uq4tfw2#
我用下面的代码修复了这样一个问题:
工作演示HERE。您可以在侧边栏中播放“Post Topics”部分,并在主内容区域中播放内容。
代码
u2nhd7ah3#
参见https://codepen.io/pikeshmn/pen/mMxEdZ
**方法:**我们使用 document.getElementById('header ').offsetHeight 获取固定导航的高度,并将滚动偏移到此值。
iqih9akk4#
实际上,有一个CSS规则:
scroll-padding-top
:)当然,最上面的元素与常规的padding-top
相结合。参见https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
0x6upsns5#
CSS卷动边界或填补
在MDN上了解更多关于scroll margin和scroll padding的信息。