web-dev-qa-db-ja.com

スクロール時にメニューを強調表示（divに到達した場合）

divがスクロールまたは//クリックされた場合、メニューポイントを強調表示したい。

http://jsfiddle.net/WeboGraph/vu6hN/2/ （それは私が欲しいものの例です）

私のコード：（JS）

    $(document).ready(function(){
      $('nav a').on('click', function(event) {
          $(this).parent().find('a').removeClass('active_underlined');
          $(this).addClass('active_underlined');
      });

      $(window).on('scroll', function() {
          $('.target').each(function() {
              if($(window).scrollTop() >= $(this).position().top) {
                  var id = $(this).attr('id');
                  $('nav a').removeClass('active_underlined');
                  $('nav a[href=#'+ id +']').addClass('active_underlined');
              }
          });
      });
    });

私（html nav）

        <nav>
           <div id="cssmenu">
              <ul id="horizontalmenu" class="underlinemenu">
                  <li><a data-scroll href="#fdesigns"  class="active_underlined">FDesigns</a> </li>
                  <li><a data-scroll href="#skills">skills</a> </li>
                  <li><a data-scroll href="#workflow">WORKFLOW</a> </li>
                  <li><a data-scroll href="#portfolio">Portfolio</a> </li>
                  <li><a data-scroll href="#about">About</a> </li>
                  <li><a data-scroll href="#kontakt">Kontakt</a> </li>
              </ul>   
          </div>
        </nav>

私（css）

.active_underlined a {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

a.active_underlined {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

ここにプロジェクトへのリンク： http://www.f-designs.de/test_onesite

jqueryhtmlcssmenunavbar
16
fab

$(this).offset().topの代わりに$(this).position().topを使用します

フィドル

As .position()は、オフセット親を基準にして、一致する要素のセットの最初の要素の現在の座標を取得します。一方、.offset()は、一致する要素のセットの最初の要素の現在の座標を取得します、ドキュメントに対して相対的です。

Webサイトでは、_.target_内のクラスを持つすべてのDIVが内部にあるため、クラス_.target_のすべての要素は0に等しい値.position().topを返します。

次のようにclass条件を作成して、要素がメニューに到達したときにifが変化するように、オフセット値を減らします。

_if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
_
13
Gaurav Kalyan

2018年にこれを発見し、より新しいバージョンのjquery（+1.0）で複製しようとする構文エラーに遭遇しました。最後の行$('nav a[href=#'+ id +']')では、属性は適切にエスケープされておらず、$('nav a[href="#'+ id +'"]')のようにする必要があります（「 "」が追加されていることに注意してください）。

これが私がこれを見つけた場所です https://api.jquery.com/attribute-contains-selector/

0
tris timb