Bootstrap Scrolllspy

Explain:

  1. There must be a resolvable identifier corresponding to the elements in the dom: <a href=" home"> </a> <div_id= "home"> </div>
  2. According to jquery, invisible target elements will be ignored and their corresponding navigation items will never be highlighted
  3. The elements that need to be monitored for rolling monitoring are relative relative positioning mode, most of which are listening body elements.
  4. When scrolling to monitor elements other than body, make sure that the height is set and that overflow-y:scroll is applied
  5. Scroll listening html elements must be. NAV li > a format

Like:

    body {
         position: relative;
    }
    <body data-spy="scroll" data-target="#navbar-example">
        <div id="navbar-example">
            <ul class="nav">
                <li><a href=""></li>
            </ul>
         </div>
    </body>

Official documents

Code snippet:

 

Listen for elements other than body:
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet/less" href="./scrollspy.less">
    <script src="../jQuery frame/less.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .w {
            width: 1300px;
            margin: auto;
        }

        #navbar {
            position: absolute;
            left: 20px;
            top: 200px;
            width: 80px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <nav id="navbar">
        <ul class="nav">
            <li class="active"><a href="#Index > Home Page</a></li>
            <li class=""><a href="#Boke > Blog</a></li>
            <li class=""><a href="#Xueyuan College</a></li>
            <li class=""><a href="#Xiazai "> Download</a></li>
            <li class=""><a href="#Lutan "> Forum</a></li>
            <li class=""><a href="#app">APP</a></li>
            <li class=""><a href="#Wenda "> Questions and Answers</a></li>
            <li class=""><a href="#Shancheng">Mall</a></li>
        </ul>
    </nav>
    <div class="w">
        <!-- The elements being monitored -->
        <div data-spy="scroll" data-target="#navbar"  data-offset="0" class="scrollspy">
            <div id="index">home page</div>
            <div id="boke">Blog</div>
            <div id="xueyuan">college</div>
            <div id="xiazai">download</div>
            <div id="luntan">forum</div>
            <div id="app">APP</div>
            <div id="wenda">Questions and answers</div>
            <div id="shangcheng">Shopping Mall</div>
        </div>
    </div>
    <script src="../jQuery frame/jquery-1.12.4.js"></script>
    <script src="./scrollspy.js"></script>
    <script>
        // After adding or deleting elements in the DOM while using the scroll listener plug-in, you need to call this refresh method as follows:
        // $('[data-spy="scroll"]').each(function(){
        //     $(this).scrollspy('refresh')
        // })
    </script>
</body>
</html>

scrollspy.less:

//  Styles for listening for scrolling elements
.nav{
    list-style: none;
    li{
        height: 50px;
        line-height: 50px;
        background-color: bisque;
        &.active{
            background-color: #ccc;
        }
        a{
            text-decoration: none;
            display: block;
            width: 100%;
            height: 100%;
            &:hover{
                text-decoration: none;
            }
        }
    }
}
// Styles of monitored elements
.scrollspy{
    position: relative;
    height: 950px;
    margin-top: 10px;
    /* overflow: auto; */
    overflow-y: scroll;
    background-color: #ccc;
    &::-webkit-scrollbar{ /* Hiding the scroll bars brought by overflow can only hide Google browser. */
        display: none;
    }
    div{
        height: 600px;
    }
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Listen for body elements:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet/less" href="./scrollspy.less">
    <script src="../jQuery frame/less.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .w {
            width: 1300px;
            margin: auto;
        }

        #navbar {
            position: fixed; /* Need to be set to fixed location */
            left: 20px;
            top: 200px;
            width: 80px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#navbar"  data-offset="0">
    <nav id="navbar">
        <ul class="nav">
            <li class="active"><a href="#Index > Home Page</a></li>
            <li class=""><a href="#Boke > Blog</a></li>
            <li class=""><a href="#Xueyuan College</a></li>
            <li class=""><a href="#Xiazai "> Download</a></li>
            <li class=""><a href="#Lutan "> Forum</a></li>
            <li class=""><a href="#app">APP</a></li>
            <li class=""><a href="#Wenda "> Questions and Answers</a></li>
            <li class=""><a href="#Shancheng">Mall</a></li>
        </ul>
    </nav>
    <div class="w">
        <!-- The elements being monitored -->
        <div class="scrollspy">
            <div id="index">home page</div>
            <div id="boke">Blog</div>
            <div id="xueyuan">college</div>
            <div id="xiazai">download</div>
            <div id="luntan">forum</div>
            <div id="app">APP</div>
            <div id="wenda">Questions and answers</div>
            <div id="shangcheng">Shopping Mall</div>
        </div>
    </div>
    <script src="../jQuery frame/jquery-1.12.4.js"></script>
    <script src="./scrollspy.js"></script>
    <script>
        // After adding or deleting elements in the DOM while using the scroll listener plug-in, you need to call this refresh method as follows:
        // $('[data-spy="scroll"]').each(function(){
        //     $(this).scrollspy('refresh')
        // })
    </script>
</body>
</html>

scrollspy.less

//  Styles for listening for scrolling elements
body{
    position: relative;
}
.nav{
    list-style: none;
    li{
        height: 50px;
        line-height: 50px;
        background-color: bisque;
        &.active{
            background-color: #ccc;
        }
        a{
            text-decoration: none;
            display: block;
            width: 100%;
            height: 100%;
            &:hover{
                text-decoration: none;
            }
        }
    }
}
// Styles of monitored elements
.scrollspy{
    margin-top: 10px;
    background-color: #ccc;
    div{ // Setting height according to practical application
        height: 600px;
    }
}

Style can set its own favorite.

scrollspy.min.js 

if(typeof jQuery==="undefined"){throw new Error("Bootstrap's JavaScript requires jQuery")}+function($){"use strict";var version=$.fn.jquery.split(" ")[0].split(".");if(version[0]<2&&version[1]<9||version[0]==1&&version[1]==9&&version[2]<1||version[0]>3){throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}}(jQuery);+function($){"use strict";function ScrollSpy(element,options){this.$body=$(document.body);this.$scrollElement=$(element).is(document.body)?$(window):$(element);this.options=$.extend({},ScrollSpy.DEFAULTS,options);this.selector=(this.options.target||"")+" .nav li > a";this.offsets=[];this.targets=[];this.activeTarget=null;this.scrollHeight=0;this.$scrollElement.on("scroll.bs.scrollspy",$.proxy(this.process,this));this.refresh();this.process()}ScrollSpy.VERSION="3.3.7";ScrollSpy.DEFAULTS={offset:10};ScrollSpy.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)};ScrollSpy.prototype.refresh=function(){var that=this;var offsetMethod="offset";var offsetBase=0;this.offsets=[];this.targets=[];this.scrollHeight=this.getScrollHeight();if(!$.isWindow(this.$scrollElement[0])){offsetMethod="position";offsetBase=this.$scrollElement.scrollTop()}this.$body.find(this.selector).map(function(){var $el=$(this);var href=$el.data("target")||$el.attr("href");var $href=/^#./.test(href)&&$(href);return $href&&$href.length&&$href.is(":visible")&&[[$href[offsetMethod]().top+offsetBase,href]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){that.offsets.push(this[0]);that.targets.push(this[1])})};ScrollSpy.prototype.process=function(){var scrollTop=this.$scrollElement.scrollTop()+this.options.offset;var scrollHeight=this.getScrollHeight();var maxScroll=this.options.offset+scrollHeight-this.$scrollElement.height();var offsets=this.offsets;var targets=this.targets;var activeTarget=this.activeTarget;var i;if(this.scrollHeight!=scrollHeight){this.refresh()}if(scrollTop>=maxScroll){return activeTarget!=(i=targets[targets.length-1])&&this.activate(i)}if(activeTarget&&scrollTop<offsets[0]){this.activeTarget=null;return this.clear()}for(i=offsets.length;i--;){activeTarget!=targets[i]&&scrollTop>=offsets[i]&&(offsets[i+1]===undefined||scrollTop<offsets[i+1])&&this.activate(targets[i])}};ScrollSpy.prototype.activate=function(target){this.activeTarget=target;this.clear();var selector=this.selector+'[data-target="'+target+'"],'+this.selector+'[href="'+target+'"]';var active=$(selector).parents("li").addClass("active");if(active.parent(".dropdown-menu").length){active=active.closest("li.dropdown").addClass("active")}active.trigger("activate.bs.scrollspy")};ScrollSpy.prototype.clear=function(){$(this.selector).parentsUntil(this.options.target,".active").removeClass("active")};function Plugin(option){return this.each(function(){var $this=$(this);var data=$this.data("bs.scrollspy");var options=typeof option=="object"&&option;if(!data)$this.data("bs.scrollspy",data=new ScrollSpy(this,options));if(typeof option=="string")data[option]()})}var old=$.fn.scrollspy;$.fn.scrollspy=Plugin;$.fn.scrollspy.Constructor=ScrollSpy;$.fn.scrollspy.noConflict=function(){$.fn.scrollspy=old;return this};$(window).on("load.bs.scrollspy.data-api",function(){$('[data-spy="scroll"]').each(function(){var $spy=$(this);Plugin.call($spy,$spy.data())})})}(jQuery);

 

Tags: JQuery less IE Javascript

Posted on Sun, 06 Oct 2019 12:47:15 -0700 by headcutter