我有一个带有顶部标题的网站,滚动时,我的一半标题消失并且菜单固定在顶部。导航使用哈希,通过单击我的菜单的链接,页面滚动到链接的#。我添加了一个 jscript 来计算我的stickyheader 的高度,以将此高度添加到我的#link 中,以便我的目标显示在我的菜单下方。它在 Chrome 和 safari 上完美运行,但在 Firefox 中,有一个问题,没有添加高度,所以我的标题显示在菜单下。当点击“回到顶部”时,位置不正确,有一个偏移量……也只有在 Firefox 上。
我不知道你是否明白我的意思,所以这里有一个 jsfiddle 可以看到它的实际效果:
这是我的js:
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if($('#stickyheader').css('position') == 'relative'){
offset = $('#stickyheader').outerHeight(true)*2;
}else{
offset = $('#stickyheader').outerHeight(true);
}
$('html, body').stop().animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500, 'swing', function () {
window.location.hash = target;
});
});
});
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() === stickyHeaderTop+1) {
$('#stickyheader').hide();
console.log('p');
}
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').fadeIn(500).css('position','fixed');
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height');
$('#stickyheader').next('.post').css('marginTop', mT);
}else{
$('#stickyheader').css({
position: 'relative',
});
$('#stickyheader').next('.post').css('marginTop', '0');
}
});
});
有人可以帮我吗?我不知道我做错了什么,
非常感谢你的帮助,