0

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

我能做些什么来解决这个问题？

的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;
    });
   });
4

1 回答 1

0

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

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

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

body{padding-top:50px}

或每个部分：

 section{padding-top:50px}

取决于您的页面的外观 - 您可能希望仅在导航固定时设置填充，并在相对时将其删除。或者您可以只保留填充物，并在您的部分顶部留出呼吸空间。

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

$('html, body').animate({ scrollTop: target.offset().top - 50}, 800);
于 2016-05-19T07:51:28.450 回答