All geek questions in one place

How to use scrollspy without using bootstrap

Does anyone know how to use scrollspy without using bootstrap? I am trying to get this to work in one of my projects using this repository:

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

but it just doesn't do what bootstrap does. Li tags are not marked active :( Any help would be appreciated.

I tried to do this:

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

The item looks like the actual menu, so I have no idea how to actually get the identifier of the item I'm hanging right now.

+6
source share
4 answers

To fix this, I wrote my own plugin. What can be found here:

https://github.com/r3plica/Scrollspy

+6
source

You can use the bootstrap download page to load ONLY scrollspy JS. You will also need "nav" css. This link should be exactly what you need: http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d

Download the JS and CSS files and add them to your website. Scrollspy should work in every boot document ( http://getbootstrap.com/javascript/#scrollspy )

+1
source

github.com/sxalexander/jquery-scrollspy does not seem to make the <nav> menu active automatically, as the Bootstrap plugin does.

However, it does provide an identifier for the item that appears in view. See this JSFiddle , which prints the identifiers of elements in the console.

You need to decide how to highlight the menu item corresponding to the item with its identifier. For example, set the attribute data-target="section1" to the menu link, and then, when the element with the identifier section1 appears in the field of view, find the menu $("#intel_nav a[data-target='" + "section1" + "']")

0
source

If someone is still interested in this, I could not get bootstrap scrollspy to work fast enough, so I wrote my (technically inefficient, but simple) solution.

Here is a demo:

 $(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>
0
source

Source: https://habr.com/ru/post/987571/

More articles:


All Articles