Как использовать scrollspy без использования начальной загрузки

Кто-нибудь знает, как использовать scrollspy без использования начальной загрузки? Я пытаюсь заставить это работать в одном из моих проектов, используя этот репозиторий:

https://github.com/sxalexander/jquery-scrollspy

но он просто не делает то, что делает самозагрузчик. Теги li не помечены как активные:(Любая помощь приветствуется.

Я пытался сделать это:

    $('#intel_nav').scrollspy({
        //n: $('#nav').offset().top,
        onEnter: function (element, position) {
            console.log(element);

            $("#intel_nav").addClass('moo');
        },
        onLeave: function (element, position) {
            $("#intel_nav").removeClass('out');
        }
    });

Элемент выглядит как фактическое меню, поэтому я понятия не имею, как на самом деле получить идентификатор элемента, над которым я сейчас нахожусь.

Источник

6 ответов

Решение

Чтобы исправить это, я написал свой собственный плагин. Который можно найти здесь:

https://github.com/r3plica/Scrollspy

Источник

Если кому-то все еще это интересно, я не смог бы заставить загрузчик scrollspy работать достаточно быстро, поэтому я написал собственное (технически неэффективное, но простое) решение.

Вот демо:

$(window).bind('scroll', function() {
    var currentTop = $(window).scrollTop();
    var elems = $('.scrollspy');
    elems.each(function(index){
      var elemTop  = $(this).offset().top;
      var elemBottom  = elemTop + $(this).height();
      if(currentTop >= elemTop && currentTop <= elemBottom){
        var id   = $(this).attr('id');
        var navElem = $('a[href="#' + id+ '"]');
    navElem.parent().addClass('active').siblings().removeClass( 'active' );
      }
    })
}); 
.active{
  color: red;
  background-color: red;
}

#nav{
  position:fixed;
  top:0;
  right:50%;
}

section{
  min-height: 500px;
}
<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   </head>
   <body>
      <nav id="nav" class="navbar navbar-template">
        <div class="row col-xs-12 text-center">
          <ul>
            <li class="active">
              <a href="#Home">Home</a>
            </li>
            <li>
              <a href="#AboutUs">AboutUs</a>
            </li>
            <li>
              <a href="#Images">Images</a>
            </li>
            <li>
              <a href="#Contact">Contact</a>
            </li>
          </ul>
        </div>
      </nav>

      <section class="scrollspy" id="Home">
      Home
      </section>

      <section class="scrollspy" id="AboutUs">
      AboutUs
      </section>

      <section class="scrollspy" id="Images">
      Images
      </section>

      <section class="scrollspy" id="Contact">
      Contact
      </section>
</body>

Источник

https://github.com/sxalexander/jquery-scrollspy, кажется, не делает <nav> меню активируются автоматически, как плагин Bootstrap.

Однако он предоставляет идентификатор элемента, который появляется в поле зрения. Посмотрите этот JSFiddle, который печатает идентификаторы элементов в консоли.

Вам необходимо решить, как выделить пункт меню, соответствующий элементу, имеющему свой идентификатор. Например, установить data-target="section1" Атрибут на ссылку меню, а затем, когда элемент с идентификатором section1 появится в меню, $("#intel_nav a[data-target='" + "section1" + "']")

Источник

Вы можете использовать страницу настройки bootstrap для загрузки ТОЛЬКО scrollspy JS. Вам также понадобится CSS "nav". Эта ссылка должна быть именно тем, что вам нужно: http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d

Загрузите файлы JS и CSS и добавьте их на свой сайт. Scrollspy должен работать в соответствии с документацией начальной загрузки ( http://getbootstrap.com/javascript/)

Источник

чистый javascript. (основной скрипт 50 строка ↓)

Ключевые точки:

  1. window.scrollY: получить количество пикселей, на которое документ прокручивается по вертикали в данный момент.
  2. Element.offsetTop: получить расстояние внешней границы текущего элемента относительно внутренней границы верха

Источник

После рассмотрения всех рекомендаций, я следую идее Gyrocode.com с jquery-scrollspy Mr. Sam Alexander (sxalexander), прекрасной работой, основанной на scrollspy MooTools Дэвида Уолша; Я считаю, что не сложно использовать это с любым меню (с навигацией или без нее) или с какой-либо творческой обязанностью, как предложено Gyrocode.com в их JSFiddle.

Все мои разделы, которые могут быть доступны, когда все имеют одинаковый тег (как

) или в этом случае одно и то же имя класса (.scrollspy), и разделы сообщают нам свой идентификатор (как часть плагина)

Я разделяю мою реализацию этого:

var menuSelected = null; // var to detect current selected element to pass the class that does visible the spy.

jQuery(document).ready(function( $ ){
  // Detect Initial scroll position
  var currentTop = $(window).scrollTop();

  $('.scrollspy').each(function (i) {
    var position = $(this).position();
    // Only to activate the top element ( current # ) 
    // if current is less than height.
    if ( i === 0 && !menuSelected && currentTop < $(this).height() ) navUpdate( $('a[href="#' + $(this).attr( 'id' ) + '"]') );

    // Basic implementation
    $(this).scrollspy({
      min: position.top - 100,
      max: position.top + $(this).height(),
      onEnter: function (element, position) {
        // update the button that have the element ID
        navUpdate( $('a[href="#' + element.id+ '"]') );
      }
    });
  });

  // method to update the navigation bar
  function navUpdate( where ){        
    if ( menuSelected ) menuSelected.removeClass( 'active' );
    menuSelected = where.parent();
    menuSelected.addClass( 'active' );
  }
});
Источник
Другие вопросы по тегам