[英]jQuery scroll function: offset by height of fixed header
我正在使用以下jQuery click函数跳转到长滚动页面的各个部分(通过锚点ID),这些部分也将固定导航标头的高度考虑在内,并因此偏移了:
$('#nav a').click(function(){
var el = $(this).attr('href');
var elWrapped = $(el);
scrollToDiv(elWrapped,75);
return false;
});
function scrollToDiv(element,navheight){
var offset = element.offset();
var offsetTop = offset.top;
var totalScroll = offsetTop-navheight;
$('body,html').animate({
scrollTop: totalScroll
}, 500);
}
这种方法效果很好,但是,这种方法的唯一缺点是,我必须定义一个偏移量,以使滚动距页面顶部偏移-在这种情况下,偏移量为75px,即固定标题的高度。 对于固定标头的高度可能会发生变化的情况(例如,通过媒体查询进行移动),此高度可能不准确,链接也不会偏移正确的空间量。
因此,我想知道如何通过计算标头的实际高度和偏移该量, 再加上 10个额外的像素来说明部分填充,来更改/增强此功能。
感谢您的协助。
单击按钮时,可以获得标题的高度。
$('#nav a').click(function(){
var el = $(this).attr('href');
var elWrapped = $(el);
var header_height = $('#header-id-goes-here').height() + 10;
//var header_height = $('#header-id-goes-here').outerHeight(); You might need outerHeight if you have padding and borders
scrollToDiv(elWrapped,header_height);
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.