1

最初は上部に固定されていないナビゲーションバーがあります。ここでやろうとしているのは、たとえば150ピクセルのオフセットをスクロールすると、ナビゲーションバーが固定位置で上部に固定され、それを使用することですページの別のセクションにリンクするためのページ内アンカー、および上部に固定された接辞ナビゲーションバーは、ページ内の正しいアンカー領域を強調表示します (scrollspy?)

ここでの問題は、ナビゲーション バーが上部に固定された後、コンテンツの一部がナビゲーション バーの後ろに隠されているため、固定されたナビゲーション バーによってアンカーがページ上の正しい位置に向かわなくなることです。

私はこの問題についてかなり長い間調査しており、本文に padding-top を追加するための多くの提案を見てきましたが、スクロールによって接辞がトリガーされるまで、トップナビゲーションは修正されません。本文にパディングを追加した後も、ナビゲーションが正しく強調表示されない

以下のセクションの解決策を 試しました Bootstrap で ScrollSpy のオフセットを設定するにはどうすればよいですか?

説明が下手なのでスクリーンショットだけ載せておきます。

これは、スクロールして貼り付ける前のスクリーンショットです ここに画像の説明を入力

これは、ナビゲーション バーが上部に固定された後のスクリーンショットで、ページ コンテンツまでスクロールします。 固定トップナビ貼り付け後の不具合

どのように機能させたいか ここに画像の説明を入力

以下は私のコードです。

<body data-spy="scroll">
  <!--This is the nav bar getting affixed to the top-->
  <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#section1">About</a></li>
        <li><a href="#section2">Method</a></li>
        <li><a href="#section3">Findings</a></li>
        <li><a href="#section4">Final</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.navbar -->

これはコンテンツ領域です

<div class="mainContent">
  <div class="row">
    <div class="col-lg-7 col-md-7">
      <div id="section1">
        <h3>About the Project</h3>
      </div>
      <h4>Read the <a href="./assets/Preliminary_Avvo.pdf">Preliminary Proposal</a></h4>
    </div>

html の残りの部分は、section2、section3、および section4 にラップされたコンテンツです。

私のCSS

.navbar-custom {
  border:none;
  background-color: #FFFFFF;
  font-weight:600;
  text-transform:uppercase;
  border-width:0;
}
.navbar-custom li{
  float:none;
}
.navbar-custom  .navbar-nav>li>a {
  color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom     .navbar-nav .active a  {
  background-color:#902c00;
  color:#FFFFFF !important;
}
#nav {
  width: 100%;
  position:static;
  top:-32px;
}
#nav.affix {
  position: fixed;
  top: 0;
  z-index:10;
  width:940px;
}

JS

/* affix the navbar after scroll below header */
$('#nav').affix({
  offset: {
    top: 150
  }
});

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
4

2 に答える 2

2

あなたが持っている効果を防ぐためのコードスニペットは次のとおりです。

var navOffset = parseInt($('body').css('padding-top'));
$('body').scrollspy({ target: '#affix-nav', offset: navOffset+10 });
$('.navbar a').click(function (event) {
  var scrollPos = jQuery('body').find($(this).attr('href')).offset().top - navOffset;
  $('body,html').animate({ scrollTop: scrollPos}, 500, function () {});
  return false;
});

コードは、効果が機能しているこのページから取得されます。

于 2014-06-02T19:38:39.160 に答える
1

解決しました。Quick-dirty fix でも動作しますが、

window.addEventListener("hashchange", function() { scrollBy(0, -50) })

このガイの功績：https://github.com/henrik

于 2014-10-07T12:21:17.977 に答える