固定導航欄，動態定位位置時覆蓋內容

Question

我正在嘗試創建一個包含多個部分的一頁網站。 我的問題是，一旦單擊導航欄中的鏈接，它就會滾動到該項目，但會覆蓋部分內容。

僅當滾動超過其原始位置時（導航才有意義），導航才被賦予靜態位置。 這是我開發網站的鏈接http://wp.matthewwood.me/

這是我的使用JQuery添加固定位置的代碼。 我嘗試將其偏移-50px以適應固定的nav大小，但這尚未解決問題。

   $(document).ready(function(){
   var offset = $(".navbar").offset().top;     
   $(window).scroll(function() {
         if ($(window).scrollTop() >= offset) {
             $('.navbar').addClass('navbar-fixed-top');

         }
         else {
             $('.navbar').removeClass('navbar-fixed-top');
         }
    });

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});

任何幫助，將不勝感激

Answer 1

使用此代碼：應該可以正常工作，並具有良好的平滑滾動效果：

   $(document).ready(function(){
   var offset = $(".navbar").offset().top;     
   $(window).scroll(function() {
         if ($(window).scrollTop() >= offset) {
             $('.navbar').addClass('navbar-fixed-top');

         }
         else {
             $('.navbar').removeClass('navbar-fixed-top');
         }
    });

 //here it starts
   $('a[href^="#"]').bind('click.smoothscroll',function (e) {
       e.preventDefault();

       var target = this.hash,
           $target = $(target);

       $('html, body').stop().animate({
           'scrollTop': $target.offset().top-90 //change value to your need 
       }, 1200, 'swing', function () {
           window.location.hash = target;
       });
   });
  //end
  });

Answer 2

當您從相對位置更改為固定位置時，div的塊值將從其高度更改為零。 這會導致您遇到偏移問題。 在這里看到這個小提琴： https : //jsfiddle.net/7muk9zhh/5/

主要變化：

JS：

$(window).scroll(function() {
    if ($(window).scrollTop() >= offset) {
        $('.navbar').addClass('navbar-fixed-top');
        $("#Main").css("margin-top", $(".navbar").height()); //Compensates for fixed positioning
    } else {
        $('.navbar').removeClass('navbar-fixed-top');
        $("#Main").css("margin-top", "");
    }
});

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        var globOffset = $(".navbar").height(); //Acts as an offset for the fixed element
        $('body').stop().animate({scrollTop: $($anchor).attr('href').offset().top - globOffset}, 1500);
        event.preventDefault();
    });

HTML：

還有一個問題。 主體使用“ #home”錨。 因此，當為此找到偏移頂部時，它返回0（body元素的偏移）。

另外，我認為自定義緩動'easeInOutExpo'需要jQuery UI（如果不起作用，則需要包含它）：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

希望這能回答您的問題！