javascript - 固定导航栏在动态给出位置时覆盖内容

Question

我正在尝试创建一个包含多个部分的单页网站。我的问题是，一旦我单击导航栏中的链接，它就会滚动到该元素，但会覆盖部分内容。

导航仅在滚动到其原始位置时才给出静态定位(希望有意义)。这是我的开发网站的链接 http://wp.matthewwood.me/

这是我使用 JQuery 添加固定定位的代码。我尝试将它偏移 -50px 以适应固定的导航大小，但这并没有解决问题。

   $(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

当您从相对定位更改为固定定位时，div 的 block 值从其高度变为零。这会导致您遇到偏移问题。在这里看到这个 fiddle : 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” anchor 用于正文。因此，当为此找到偏移量顶部时，它返回 0(正文元素的偏移量)。

此外，我认为自定义缓动“easeInOutExpo”需要 jQuery UI(如果它不起作用，您需要包含它):

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

希望这能回答您的问题!