Logo Logo Nue Package
Getting Started Introduction
Getting Started Gulp
Getting Started Customization
Getting Started Credits
Getting Started Changelog
Design & Graphics Bootstrap Icons
Design & Graphics Illustrations
Components Accordion
Components Alerts
Components Avatars
Components Badge
Components Breadcrumb
Components Buttons
Components Button group
Components Cards
Components Collapse
Components Column divider
Components Devices
Components Divider
Components Dropdowns
Components Icons
Components List Group
Components Lists
Components Legend Indicator
Components Modal
Components Offcanvas
Components Page Header
Components Pagination
Components Popovers
Components Progress
Components Profile
Components Shapes
Components Sliding Image
Components Spinners
Components Steps
Components Tab
Components Toasts
Components Tooltips
Components Typography
Navbars Navbar
Navbars Navs
Navbars Mega Menu
Navbars Navbar Vertical Aside
Navbars Scrollspy
Tables Tables
Tables Datatables
Tables Sticky Header
Basic forms Basic forms
Basic forms Checks and switches
Basic forms Input group
Utilities Backgrounds
Utilities Borders
Utilities Colors
Utilities Links
Utilities Position
Utilities Rotations
Utilities Shadows
Utilities Sizing
Utilities Spacing
Utilities Z-index
Utilities Opacity
Advanced forms Advanced select
Advanced forms Datepicker
Advanced forms Date Range Picker
Advanced forms Calendar (Fullcalendar)
Advanced forms File attachments
Advanced forms Drag’ n’ drop file uploads
Advanced forms WYSIWYG Editor
Advanced forms Quantity counter
Advanced forms Copy to Clipboard
Advanced forms Input mask
Advanced forms Step forms (Wizards)
Advanced forms Wizards
Advanced forms Add field
Advanced forms Toggle password
Advanced forms Count characters
Advanced forms Form Search
Advanced forms Toggle switch
Advanced forms Google reCAPTCHA
Others Chart.js
Others Counter
Others Circles.js (Pie Chart)
Others Fullscreen Lightbox
Others Leaflet
Others JSVectorMap
Others SortableJS
Others Sticky block
Others Go To

No Results

  • Preview Demo
Logo Nµe
  • Nue
  • UI (HTML)
  • Getting Started
  • Introduction
  • Credits
  • Design & Graphics
  • Bootstrap Icons
  • Iconify Design
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic Forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag n' Drop Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utility
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-Index
  • Opacity

Scrollspy

Bootstrap Scrollspy

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>

    
      <script>
        (function() {
          // INITIALIZATION OF SCROLLSPY
          // =======================================================
          new bootstrap.ScrollSpy(document.body, {
            target: '#navbarVerticalNavMenuSettingsEg',
            offset: 10
          })

          new NueScrollspy('#navbarVerticalNavMenuEg', {
            breakpoint: 'lg'
          })
        });
      </script>
    
  

How it works

Scrollspy has a few requirements to function properly:

  • Scrollspy requires data-nue-scrollspy-options='{ "target": "#yourID" }' on <body> element and must point to an element with the target ID. And also, add the .js-scrollspy class to the element where this ID is placed.
  • Scrollspy requires position: relative; on the element, you’re spying on, usually the <body>.
  • When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
  • Anchors (<a>) are required and must point to an element with that ID.

When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

Example

  • Preview
  • HTML
  • JS
  • 1. Accounts
  • 2. Links to other websites
  • 3. Termination
  • 4. Governing law
  • 5. Changes

1. Accounts

When you create an account with us, you must provide us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account on our Service.

You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service.

You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.

2. Links to other websites

Our Service may contain links to third-party web sites or services that are not owned or controlled by Front.

Front has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Front shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.

We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.

3. Termination

We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.

All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.

We may terminate or suspend your account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.

Upon termination, your right to use the Service will immediately cease. If you wish to terminate your account, you may simply discontinue using the Service.

All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.

4. Governing law

These Terms shall be governed and construed in accordance with the laws of Jersey, without regard to its conflict of law provisions.

Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.

5. Changes

We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 30 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.

By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.

        
          <!-- Description -->
          <div class="container content-space-1">
            <div class="row">
              <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                <!-- Navbar -->
                <div class="navbar-expand-md">
                  <!-- Navbar Toggle -->
                  <div class="d-grid">
                    <button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
                      <span class="d-flex justify-content-between align-items-center">
                        <span class="text-dark mb-0">Menu</span>

                        <span class="navbar-toggler-default">
                          <i class="bi-list"></i>
                        </span>

                        <span class="navbar-toggler-toggled">
                          <i class="bi-x"></i>
                        </span>
                      </span>
                    </button>
                  </div>
                  <!-- End Navbar Toggle -->

                  <!-- Navbar Collapse -->
                  <div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
                    <ul id="navbarSettingsEg2" class="js-sticky-block js-scrollspy nav nav-tabs nav-link-gray nav-vertical"
                        data-nue-sticky-block-options='{
                         "parentSelector": "#navbarVerticalNavMenuEg2",
                         "targetSelector": "#header",
                         "breakpoint": "md",
                         "startPoint": "#navbarVerticalNavMenuEg2",
                         "endPoint": "#stickyBlockEndPointEg2",
                         "stickyOffsetTop": 20
                       }'>
                      <li class="nav-item">
                        <a class="nav-link active" href="#content">1. Accounts</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#linksToOtherWebsInfo">2. Links to other websites</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#terminationInfo">3. Termination</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#goveringLawInfo">4. Governing law</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#changesInfo">5. Changes</a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Navbar Collapse -->
                </div>
                <!-- End Navbar -->
              </div>
              <!-- End Col -->

              <div class="col-md-8 col-lg-9">
                <div class="mb-7">
                  <p>Thanks for using our products and services ("Services"). The Services are provided by Pixeel Ltd. ("Front"), located at 153 Williamson Plaza, Maggieberg, MT 09514, England, United Kingdom.</p>

                  <p>By using our Services, you are agreeing to these terms. Please read them carefully.</p>

                  <p>Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.</p>
                </div>

                <div id="accountInfo" class="mb-7">
                  <h4>1. Accounts</h4>

                  <p>When you create an account with us, you must provide us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account on our Service.</p>

                  <p>You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service.</p>

                  <p>You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.</p>
                </div>

                <div id="linksToOtherWebsInfo" class="mb-7">
                  <h4>2. Links to other websites</h4>

                  <p>Our Service may contain links to third-party web sites or services that are not owned or controlled by Front.</p>

                  <p>Front has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Front shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.</p>

                  <p>We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.</p>
                </div>

                <div id="terminationInfo" class="mb-7">
                  <h4>3. Termination</h4>

                  <p>We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>

                  <p>All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.</p>

                  <p>We may terminate or suspend your account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>

                  <p>Upon termination, your right to use the Service will immediately cease. If you wish to terminate your account, you may simply discontinue using the Service.</p>

                  <p>All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.</p>
                </div>

                <div id="goveringLawInfo" class="mb-7">
                  <h4>4. Governing law</h4>

                  <p>These Terms shall be governed and construed in accordance with the laws of Jersey, without regard to its conflict of law provisions.</p>

                  <p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.</p>
                </div>

                <div id="changesInfo" class="mb-7">
                  <h4>5. Changes</h4>

                  <p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 30 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.</p>

                  <p>By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.</p>
                </div>

                <!-- End Sticky End Point -->
                <div id="stickyBlockEndPointEg2"></div>
              </div>
              <!-- End Col -->
            </div>
            <!-- End Row -->
          </div>
          <!-- End Description -->
        
      
        
          <!-- JS Plugins Init. -->
          <script>
            (function() {
              // INITIALIZATION OF STICKY BLOCKS
              // =======================================================
              Promise.all(Array.from(document.images)
                .filter(img => !img.complete)
                .map(img => new Promise(resolve => {
                  img.onload = img.onerror = resolve
                })))
                .then(() => {
                  new NueStickyBlock('.js-sticky-block', {
                    targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                  })
                })


              // INITIALIZATION OF SCROLLSPY
              // =======================================================
              new bootstrap.ScrollSpy(document.body, {
                target: '#navbarSettingsEg2',
                offset: 10
              })

              new NueScrollspy('#navbarVerticalNavMenuEg2', {
                breakpoint: 'lg'
              })
            })()
          </script>
        
      

Methods

ParametersDescriptionDefault value

collapsibleNav

Navigation selector to be collapsed before the scroll animation.null

breakpoint

Breakpoint navigation.lg

resetOffset

Disable offset on at a certain resolution.null

resolutionsList

Resolutions for breakpoint.{ xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }

scrollspyContainer

Element selector for which scrollspy is enabled.body