导航菜单向下滚动,具有不同的高度

时间:2016-03-05 13:22:50

标签: javascript jquery html css

我有网站,我想制作向下滚动按钮和导航菜单(仅用圆形按钮在小提琴中)。但我身高有问题。我知道我可以从锚target.offset.top中减去它,但我的导航菜单在切换时的高度不同。

例如,正常导航菜单的高度为125px,我需要减去125px,但如果我的切换导航菜单高度为90px,我需要做什么?

我为内容制作了透明导航和蓝色背景,您可以更好地查看问题。

这是我的小提琴示例:

https://jsfiddle.net/DTcHh/17740/

1 个答案:

答案 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();
    });
});

JSFIDDLE DEMO

接下来,您可以使用.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; 
}

JSFIDDLE DEMO