Question

我在顶部有一个导航栏。页面加载时，它是“相对的”。如果我滚动。它改为“固定”。页面上存在锚点问题。当页面加载并且我位于页面顶部时，单击指向锚点的链接会将我滚动到部分，并隐藏其中的一部分。当我在该位置单击相同的链接时，它会滚动到正确的部分顶部。

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

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

此问题与fixed-nav有关。当一个元素被修复时，它将从DOM中移除并位于它的顶部。因此，所有内容都会向上移动导航栏的高度。

您需要做的是在css中对身体应用填充，这有助于导航栏的高度，并且您的页面将正确滚动到锚点。

例如：如果导航条高50 px：

body{padding-top:50px}

或每个部分：

 section{padding-top:50px}

取决于页面的外观 - 您可能只想在导航固定时设置填充，并在相对时删除它。或者你可以保持填充，并在你的部分顶部有喘息空间。

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

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

固定导航和锚点

1 个答案: