我有网站,我想制作向下滚动按钮和导航菜单(仅用圆形按钮在小提琴中)。但我身高有问题。我知道我可以从锚target.offset.top
中减去它,但我的导航菜单在切换时的高度不同。
例如,正常导航菜单的高度为125px,我需要减去125px,但如果我的切换导航菜单高度为90px,我需要做什么?
我为内容制作了透明导航和蓝色背景,您可以更好地查看问题。
这是我的小提琴示例:
答案 0 :(得分:2)
您可以更改第二个jQuery部分并计算所需的滚动高度,如下所示:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
// store offset().top in a var
var $anchor_scroll = $($anchor.attr('href')).offset().top;
// calculate offset().top - 90px
var $anchor_scroll_calc = $anchor_scroll - 90;
$('html, body').stop().animate({
scrollTop: $anchor_scroll_calc
}, 1500);
event.preventDefault();
});
});
接下来,您可以使用.hasClass
检查.navbar-fixed-top
是否已折叠,并在计算中使用if {} else {}
函数:
if( $('.navbar-fixed-top').hasClass('top-nav-collapse')) {
var $anchor_scroll_calc = $anchor_scroll - 90;
} else {
var $anchor_scroll_calc = $anchor_scroll - 120;
}