導航菜單以不同的高度向下滾動

Question

我有網站，我想制作向下滾動按鈕和導航菜單（僅在顯示圓形按鈕時）。 但是我身高有問題。 我知道我可以從錨target.offset.top減去它，但是導航菜單的切換高度卻不一樣。

例如，正常的導航菜單為125px高度，我需要減去125px，但是如果我的切換導航菜單為90px高度該怎么辦？

我對內容進行了透明導航和設置為藍色背景，可以使您更好地看到問題。

這是我的小提琴示例：

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

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演示

接下來，您可以使用.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演示