how to use scrollspy without using bootstrap

2020-05-23 16:17发布

站内问答 / jQuery
1415 5 5

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.

5条回答
闹够了就滚
2楼-- · 2020-05-23 16:54

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' );
  }
});
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2020-05-23 16:57

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>

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2020-05-23 17:06

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

https://github.com/r3plica/Scrollspy

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2020-05-23 17:12

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)

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
6楼-- · 2020-05-23 17:18

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" + "']")

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)