как использовать scrollspy без использования bootstrap

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

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

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

Я пробовал сделать это:

    $('#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');
        }
    });

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

8
jquery scrollspy

4 ответов

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

https://github.com/r3plica/Scrollspy

7

Если кто-то все еще заинтересован в этом, я не мог заставить bootstrap 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>
4

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

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

1

github.com/sxalexander/jquery-scrollspy не делают <nav> меню активны автоматически, как загрузочный плагин делает.

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

вам нужно решить, как выделить пункт меню, соответствующий элементу, имеющему свой идентификатор. Например,

0