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

tag, and there must be an tag under the
• .

  Note: In addition, we need to put the

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

  Copy after login

  Copy after login

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

  .
  --- To put it simply, the tag under
  must have a href="#id" attribute, and there must be a corresponding such a tag; when the content scrolls to the tag, the corresponding
  will automatically selected.
  --In fact, friends who have done web development know this. In previous versions of HTML, anchor tags usually used , 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')
   }
  
  Copy after login
  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 . 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()
    }
  
  Copy after login
  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 ). 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()
   }
  
  Copy after login
  Copy after login
  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 tag
  2. Add the .nav component within the tag, and add the href="#tag" attribute to li->a
  　3. Add
  ;
  　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>
  
  Copy after login
  <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>
  
  
  Copy after login
  <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>
  
  
  Copy after login
  $(function () {
    $('#body').scrollspy({ target: '#sc' });
  });
  
  Copy after login
  The above is the entire content of this article, I hope it will be helpful to everyone’s study.
  Related labels：
  bootstrap scrolling listener
  source：php.cn
  Previous article：Fullpage.js fixed navigation bar-implementing positioning navigation bar_javascript skills Next article：Implementing multi-room chat based on socket.io+express_node.js
  Statement of this Website
  The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
  Latest Articles by Author
  • What is a NullPointerException, and how do I fix it?
    2024-10-22 09:46:29
  • From Novice to Coder: Your Journey Begins with C Fundamentals
    2024-10-13 13:53:41
  • Unlocking Web Development with PHP: A Beginner's Guide
    2024-10-12 12:15:51
  • Demystifying C: A Clear and Simple Path for New Programmers
    2024-10-11 22:47:31
  • Unlock Your Coding Potential: C Programming for Absolute Beginners
    2024-10-11 19:36:51
  • Unleash Your Inner Programmer: C for Absolute Beginners
    2024-10-11 15:50:41
  • Automate Your Life with C: Scripts and Tools for Beginners
    2024-10-11 15:07:41
  • PHP Made Easy: Your First Steps in Web Development
    2024-10-11 14:21:21
  • Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
    2024-10-11 12:59:11
  • The Key to Coding: Unlocking the Power of Python for Beginners
    2024-10-11 12:17:31
  Latest Issues
  The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
  From 2024-04-06 21:58:04
  0
  1
  800
  How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
  From 2024-04-06 20:22:15
  0
  1
  454
  Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
  From 2024-04-06 12:53:11
  0
  1
  376
  Bootstrap switch not working properly when web page is resized This is the code: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security&q...
  From 2024-04-05 08:45:39
  0
  1
  3443
  Display AWS PDF files in Bootstrap mode in Laravel I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
  From 2024-04-04 22:16:18
  0
  1
  1450
  Related Topics
  More>
  • How to change phpmyadmin to Chinese
  • What is the difference between JD International self-operated and JD self-operated
  • What is a browser plug-in
  • How to refund Douyin recharged Doucoin
  • How to open gff file
  • How to implement color fonts in css
  • what is nodejs
  • oracle insert usage