0

I have a navbar at top. When page loads, it is 'relative'. If I scroll. it changes to 'fixed'. There is an issue with anchors on page. When page loads and I am at top of page, clicking link to an anchor scrolls me to section and a part of it is hidden. When I click the same link in that position, it scrolls to the top of section correct.

What can I do to fix that problem?

The HTML

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

The 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;
    });
   });

and

   $(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: Solved in this way

   $(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 でボディにパディングを適用することです。これは、ナビゲーション バーの高さを識別し、ページがアンカーに正しくスクロールします。

例: ナビゲーション バーの高さが 50px の場合:

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 に答える