how to use scrollspy without using bootstrap

Question

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 the bootstrap one does. The li tags are not marked as active :( Any help would be appreciated.

I have tried doing 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 element appears to be the actual menu, so I have no idea how to actually get the id of the element I am currently hovering over.

score 21 · Answer 1 · answered Mar 13 '18 at 13:28

If anyone is still interested in this, I couldn't get the bootstrap scrollspy to work quickly enough so I wrote my own (technically inefficient, but simple) solution.

Here's 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>

I don't have any numbers, but for each scroll event call (which probably happens a multiple times per second when scrolling) you are iterating over every element, and then reapplying classes to each nav link. It should be fine since the number of elements / nav links is naturally bound by usability limitations, but it is a theoretically inefficient implementation :) — bnunamak, Nov 01 '18 at 13:15
Yeah, I discovered the inefficiency. I made some big improvements. See my answer at https://stackoverflow.com/questions/53039757/optimizing-javascript-for-auto-scroll-feature — StevieD, Nov 04 '18 at 16:32
Hey @bnunamak in chrome, when I click on any link, at that time of hovering the class constantly changes and the chrome hover effect also goes when scrolling. So styling also constantly changes as well. — Shashank Bhatt, Oct 21 '19 at 19:12

score 9 · Accepted Answer · answered May 26 '15 at 13:50

9

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

https://github.com/r3plica/Scrollspy

answered May 26 '15 at 13:50

r3plica

13,017
23
128
290

bootstrap 4 alpha didn't have Scrollspy, so your plugin was good, but is there option to `refresh`, which updates current position ? – Shaiju T Mar 27 '17 at 14:42
This is awesome. Possible to change the active class to something else other than `active`? – Soolie Nov 21 '17 at 08:43
This works very well, just had to change the .parent() bind, as my css was connected to the "a" element itself. – tibelchior Oct 25 '22 at 22:10

score 1 · Answer 3 · answered May 20 '15 at 12:29

github.com/sxalexander/jquery-scrollspy doesn't seem to make <nav> menus active automatically as Bootstrap plug-in does.

However it does provide ID of the element that comes into view. See this JSFiddle that prints element IDs in the console.

You need to decide how to highlight menu item corresponding to the element having its ID. For example, set data-target="section1" attribute on menu link and then when element with ID section1 comes into view, locate the menu by $("#intel_nav a[data-target='" + "section1" + "']")

score 1 · Answer 4 · answered Dec 09 '16 at 00:30

You can use bootstrap's customize page to download ONLY scrollspy JS. You will also need the "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 site. Scrollspy should work per bootstrap's docs (http://getbootstrap.com/javascript/#scrollspy)

Carson · Answer 5 · 2021-10-28T07:27:57.060

pure javascript. (main script 50 line ↓)

Keypoints:

window.scrollY: Get the number of pixels that the document is currently scrolled vertically.
Element.offsetTop: Get the distance of the outer border of the current element relative to the inner border of the top

<style>
  body {
    min-height: 150em
  }
  article {
    min-height: 20em
  }

  .active {
    color: #fff307;
  }
</style>
<nav style="position: fixed; top:0; right: 50%">
  <ul>
    <li><a href="#about">about</a></li>
    <li><a href="#product">product</a></li>
    <li><a href="#contact">contact</a></li>
  </ul>
</nav>
<body>
  <article id="about" style="background-color: #a6b4cd">About</article>
  <article id="product" style="background-color: #eeb554">Product</article>
  <article id="contact" style="background-color: #88f3d1">Contact</article>
</body>

<script>
  //  main script
  /***
   * @param {Element} scrollTarget
   * @param {Element} labelTarget
   * @param {?Number} frequency : Number (millisecond) Control how often to do the check.
   */
  function ScrollSpy(scrollTarget, labelTarget, {frequency = 500}) {

    const labelTargets = [...labelTarget.querySelectorAll(`a[href^="#"]`)]
      .map(e => {
        const m = e.href.match(/.*#(.*)/)
        if (m) {
          return [e, m[1]]
        }
        return null
      }).filter(e => e !== null)

    const hrefArray = labelTargets.map(([e, href]) => href)

    // dataArray: [{targetElem, labelElem, id}, ...]
    const dataArray = [...scrollTarget.querySelectorAll(`[id]`)].map(e => {
      if (hrefArray.includes(e.id)) {
        return [e, ...labelTargets.filter(([_, href]) => href === e.id)[0]]
      }
      return null
    }).filter(e => e !== null)

    document.addEventListener("scroll", (e) => {
      if (Date.now() - ScrollSpy.lastChangeTime < frequency) {
        return
      }
      ScrollSpy.lastChangeTime = Date.now()

      for (const [curElem, labelElem, curID] of dataArray) {
        if (
          window.scrollY >= curElem.offsetTop &&
          window.scrollY <= curElem.offsetTop + curElem.clientHeight
        ) {
          labelElem.classList.add("active")
          continue
        }
        labelElem.classList.remove("active")
      }
    })
  }

  ScrollSpy.lastChangeTime = 0 // Create a new attribute to keep the variable.
</script>

<script>
  //  usage
  ScrollSpy(document.body, document.querySelector(`nav`), {})
  // ScrollSpy(document.body, document.querySelector(`nav`), {frequency: 1000})
</script>

J. A. Mendez · Answer 6 · 2019-02-27T08:35:20.223

After reviewing all recommendations, I follow the Gyrocode.com idea, with the Mr. Sam Alexander (sxalexander) jquery-scrollspy, a nicely work based on David Walsh's MooTools scrollspy; I believe that is not to hard use this with any menu (with or without nav) or in any creative duty as the proposed by Gyrocode.com in their JSFiddle.

All my sections that can be reached when all have the same tag (as <section>) or in this case the same class name (.scrollspy), and the sections tell us their ID (as part of the plugin)

I share my implementation of this:

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

how to use scrollspy without using bootstrap

6 Answers6

Linked