Question

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

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

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

这是我的小提琴示例：

Answer 1

您可以更改第二个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

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

1 个答案: