Javascript 带有粘性标题的哈希滚动导航,偏移量不适用于firefox
我有一个网站的标题是“粘贴到顶部”,当滚动时,我的标题的一半会消失,菜单会粘贴到顶部。 导航使用散列,通过单击“我的菜单”的链接,页面滚动到链接的#。 我已经添加了一个jscript来计算我的粘贴头的高度,以便将此高度添加到我的#链接中,这样我的目标就显示在我的菜单下。 它在Chrome和safari上运行得非常好,但是在Firefox中,有一个问题,没有添加高度,所以我的标题显示在菜单下。 当点击“返回顶部”时,位置不正确,存在偏移。。。也只在firefox上 我不知道您是否理解我的意思,因此这里有一个JSFIDLE来查看它的实际操作: 这是我的js:Javascript 带有粘性标题的哈希滚动导航,偏移量不适用于firefox,javascript,jquery,css,scroll,contentoffset,Javascript,Jquery,Css,Scroll,Contentoffset,我有一个网站的标题是“粘贴到顶部”,当滚动时,我的标题的一半会消失,菜单会粘贴到顶部。 导航使用散列,通过单击“我的菜单”的链接,页面滚动到链接的#。 我已经添加了一个jscript来计算我的粘贴头的高度,以便将此高度添加到我的#链接中,这样我的目标就显示在我的菜单下。 它在Chrome和safari上运行得非常好,但是在Firefox中,有一个问题,没有添加高度,所以我的标题显示在菜单下。 当点击“返回顶部”时,位置不正确,存在偏移。。。也只在firefox上 我不知道您是否理解我的意思,因此
$(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');
}
});
});
有人能帮我吗?我不知道我做错了什么
非常感谢您的帮助,尝试将此用于滚动动画
$('html, body').animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500);
谢谢@James,它工作得很好,你能解释一下我做错了什么吗?谢谢坦率地说,我不知道出了什么问题。我也面临同样的问题,这解决了我的问题。所以我想我会发布这个,它可能会帮助你。