固定导航和锚点

Question

我在顶部有一个导航栏。页面加载时，它是 'relative'。如果我滚动。它变为 'fixed'。页面上的锚点存在问题。当页面加载并且我位于页面顶部时，单击 link 到一个锚点会将我滚动到部分，并且它的一部分被隐藏。当我在该位置单击相同的 link 时，它会滚动到正确部分的顶部。

我该怎么做才能解决这个问题？

HTML

<nav id="fixedmenu">
 <ul>
  <li><a href="#brends">Brends</a></li>
 </ul>
</li>
...
<section id="brends"></section>

javascript

   $(document).ready(function() {
    $('a[href^="#"]').click(function() {
     var target = $(this.hash);
     if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
     if (target.length == 0) target = $('html');
     $('html, body').animate({ scrollTop: target.offset().top }, 800);
     return false;
    });
   });

和

   $(document).ready(function() {
    var div = $('#fixedmenu');
    var start = $(div).offset().top;
    var wnd = $(document).width();
    $.event.add(window, "scroll", function() {
     var p = $(window).scrollTop();
     $(div).css('position',( (p) > start && wnd > 319 ) ? 'fixed' : 'static');
     $(div).css('top',((p)>start) ? '0px' : '');
     $(div).width($('.container').width());
     $(div).css('box-shadow', '0px 3px 5px 0px rgba(50, 50, 50, 0.4');
    });
   });

UPD：这样解决了

   $(document).ready(function() {
    $('a[href^="#"]').click(function() {
     var target = $(this.hash);
     if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
     if (target.length == 0) target = $('html');
     var menuheight = $('#fixedmenu').height();
     var ofs = ( $('#fixedmenu').css('position') == 'fixed' ) ? menuheight : menuheight * 2;
     $('html, body').animate({ scrollTop: target.offset().top - ofs }, 800);
     return false;
    });
   });

Answer 1

此问题与固定导航有关。当一个元素固定时，它会从 DOM 中移除并位于其上方。因此，所有内容都会向上移动导航栏的高度。

您需要做的是在 css 中对您的正文应用填充，它标识导航栏的高度，您的页面将正确滚动到锚点。

例如：如果导航栏高 50 像素：

body{padding-top:50px}

或每个部分：

 section{padding-top:50px}

取决于您的页面外观 - 您可能希望仅在导航固定时设置内边距，并在导航相对时将其移除。或者您可以只保留内边距并在您的部分顶部留出喘息空间。

实现此目的的另一种方法是删除代码中 offset.top 的偏移量：

$('html, body').animate({ scrollTop: target.offset().top - 50}, 800);

固定导航和锚点

Fixed nav and anchor

jquery

fixed

anchor-scroll