0

だから私は2つの問題を抱えていましたが、最初のものを解決しました。1 つ目は、特定の div (またはこの場合は div の高さ) の後にナビゲーション バーを固定することでした。とにかく、私が今抱えている問題は、アクティブなセクションにあるときにナビゲーションリンクに下線を付けたり、色を変えたりするにはどうすればよいかということです. つまり、最初のセクションにいる場合、ナビゲーション バーの最初のリンクに下線が引かれ、下にスクロールすると、それぞれのリンクとセクションで同じことが起こります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(window).scroll(function () { 
      if ($(window).scrollTop() > 550) {
        $('#nav_bar').addClass('navbar-fixed');
      }
      if ($(window).scrollTop() < 551) {
        $('#nav_bar').removeClass('navbar-fixed');
      }
    });
  });
</script>

<div id="page">
  <!--top section-->
  <section id="first">
    <div class="top headline"><img src="" alt="Logo"></div>
    <div class="top-with">with</div>
    <div class="max-top"><img src="" alt="Logo"></div>
  </section>
</div>

<!-- fixed nav-bar -->
<div id='nav_wrapper'>
  <nav id='nav_bar'>
    <ul id='nav_links'>
      <img src="" alt="max-logo"> 
      <li class="active">
        <li><a href="#first">1</a></li>
        <li><a href="#second">2</a></li>
        <li><a href="#third">3</a></li>
        <li><a href="#fourth">4</a></li>
        <li><a href="#fifth">5</a></li>
      </li>
    </ul>
  </nav>
</div>
4

1 に答える 1

3

私はあなたが何をしようとしているのか理解していると思います.私は最近同じ問題を抱えていました.

各セクション$(document).scrollTop()の と比較する必要があります。$(section).offset().topアクティブなセクションの ID を取得したら<a>、同じ href を持つ を見つけて強調表示を適用します。

$(document).scroll(function(){
    var st = $(this).scrollTop();

    $(section).each(function() {
        if(st > $(this).offset().top && st <= $(this).offset().top + $(this).height() ){                    
            var id = $(this).attr('id');
            $('a[href="#'+id+'"]').addClass('active');
        }else{
            var id = $(this).attr('id');
            $('a[href="#'+id+'"]').removeClass('active');   
        }   
    });

});

あなたは私のフィドルをチェックアウトすることができます

于 2013-11-01T01:50:34.943 に答える