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

使用此代码：应该正常工作并具有良好的平滑滚动效果：

   $(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（主体元素的偏移量）。

此外，我认为自定义缓动'easeInOutExpo'需要jQuery UI（如果这不起作用，则需要包含它）：

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

希望这能回答你的问题！

固定导航栏在动态指定位置时覆盖内容

2 个答案: