我在页面上有多个scrollTo。问题是它在第一次点击时有点偏离标记但在后续点击后更正。我该怎么做才能纠正这个问题。我的代码如下所示?:
var newHash;
$(".nav-right li a").on('click', function(event) {
newHash = $(this).attr("id");
if (this.hash !== "") {
// Store hash
hash = $("h2" + "#" + $(this).attr("id"));
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - $("#header.swag-style").height(),
}, 800, function(){
return false;
window.location.hash = newHash;
});
} // End if
});
当您点击下面页面上的top-nav时,您可以看到问题:
我尝试过下面建议的解决方案无济于事。
答案 0 :(得分:0)
问题是你的#header
在开头没有类swag-style,所以$("#header.swag-style").height()
为空。
尝试使用$("#header").height()
代替$("#header.swag-style").height()
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - $("#header").height(),
}, 800, function(){
return false;
window.location.hash = newHash;
});
答案 1 :(得分:0)
我弄清楚问题是什么。我在下面添加了代码块,其中添加了class
.swag-style
if ($(this).scrollTop() > 50) {
$('#header').addClass('swag-style');
} else {
$('#header').removeClass('swag-style');
}
上述代码表示在第一次单击触发满足上述条件的滚动后添加.swag-style
类。这反过来会导致高度发生变化。随后的点击将找到正确的高度。
我通过添加下面的行来解决问题,该行在点击后立即添加了类.swag-style
,这样就可以在点击触发滚动发生之前找到正确的高度。
$('#header, #search-box').addClass('swag-style');