it-roy-ru.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

12
fab

Используйте $(this).offset().top вместо $(this).position().top

Fiddle

В качестве .position() получают текущие координаты первого элемента в наборе совпадающих элементов относительно родительского смещения, тогда как .offset() получают текущие координаты первого элемента в наборе совпадающих элементов относительно документа.

На вашем веб-сайте все DIV с классом внутри .target находятся внутри, поэтому все элементы класса .target возвращают значение .position().top, равное 0.

Уменьшите значение смещения, чтобы class изменился, когда элемент достигнет меню, сделав условие if следующим образом:

if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
9
Gaurav Kalyan

Нашел это в 2018 году и столкнулся с синтаксической ошибкой, пытаясь воспроизвести более свежую версию jquery (+1.0). В последней строке $('nav a[href=#'+ id +']') атрибут не экранирован должным образом и должен быть таким же, как $('nav a[href="#'+ id +'"]') (примечание добавлено "").

Вот где я нашел это https://api.jquery.com/attribute-contains-selector/

0
Tristan Timblin