Bootstrap must learn scrolling monitoring every day_javascript skills

This article introduces Bootstrap scrolling monitoring for everyone to learn. The specific content is as follows

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- If you use scroll monitoring, the navigation bar must use the nav component of class="nav":

The following is a section of the source code, the part marked in red can prove this:

When using ScrollSpy, you need to use the 73a72cdc17fc2b29bb35d64b4687fa7c tag, and there must be an 3499910bf9dac5ae3c52d5ede7383485 tag under the 25edfb22a4f469ecb59f1190150159c6.

Note: In addition, we need to put the 73a72cdc17fc2b29bb35d64b4687fa7c tag into another container (such as div) and add an id to the parent container Properties (this is introduced in Section 4)

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()
 }

2. Navbar links must have resolvable id targets. For example, a bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08ed must correspond to something in the DOM like 732ca84c1bf0e60e7d445d692fea74f4.

--- To put it simply, the 3499910bf9dac5ae3c52d5ede7383485 tag under 25edfb22a4f469ecb59f1190150159c6 must have a href="#id" attribute, and there must be a corresponding 5912d9504c1a7313ab31aeb74be9d55e5db79b134e9f6b82c0b36e0489ee08ed such a tag; when the content scrolls to the 5ffad543fdd9d71340ebb3c2c670dbf3 tag, the corresponding 25edfb22a4f469ecb59f1190150159c62dac5b3c1a71acb02bf03dd588b09a33 will automatically selected.

--In fact, friends who have done web development know this. In previous versions of HTML, anchor tags usually used bc8f08fb0993388c993dc7bf88c0ef43, but anchor tags in HTML5 have been abandoned. Instead of the name attribute, use the id attribute

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

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the 6c04bd5ca3fcae76e30b72ad730ca86d. When scrollspying on elements other than the

--- If you monitor the scrolling of the Body, then you must add the position:relative style to the body

--- If what is being monitored is not the Body, but other elements [seemingly this method is common], then you need to add three styles: position:relative;height:500px;overflow-y :scroll;

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()
  }

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the 6c04bd5ca3fcae76e30b72ad730ca86d). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

--- You need to add the data-spy="scroll" attribute and data-target attribute to the label of the scrolling content

The data-spy attribute specifies the element to be monitored, and the data-target attribute specifies the nav highlighting that needs to be controlled during scrolling

Look at the initialization source code below again. The position marked in red, the value of this.options.target, is equal to the value of the data-target of the scrolling content element. Seeing this, you may have thought that before defining .nav When making a component, we need to put the .nav in another container (such as a div), and the container needs to have an id attribute (the same value as the data-target needs to be set here).

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()
 }

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag is the ID of the element to carry the scrolling content, nav-parent-div-id is the id of the parent element of the .nav element (that is, the value of data-target)

I wrote a bunch of messy stuff, here is a summary of a few simple steps:

　1. Add tag240da3ef6b880ee42429071353b2bdbe

2. Add the .nav component within the tag, and add the href="#tag" attribute to li->a

　3. Add d111d6fe33c5d1eadcb1b41531cb3333;

　4. Add style #content{height:500px;overflow-y:scroll;opsition:relative;}

5. Add script $('#content').scrollspy({target:'scrollSpyID'});

Finally, a little chestnut:

<style type="text/css">
    #body {
      position: relative;
      height: 500px;
      overflow-y: scroll;
    }
  </style>

<div id="sc">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#A">第一段</a>
      </li>
      <li>
        <a href="#B">第二段</a>
      </li>
      <li>
        <a href="#C">第三段</a>
      </li>
    </ul>

  </div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

　　<a id="A">第一段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第二段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第三段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

</div>

$(function () {
  $('#body').scrollspy({ target: '#sc' });
});

The above is the entire content of this article, I hope it will be helpful to everyone’s study.