Bootstrap JS Scrollspy进入Bootstrap面板
将Bootstrap JS Scrollspy添加到Bootstrap面板时，我遇到了一些问题。 我想像W3School示例那样将固定的Nav导入面板。 如果我尝试设置固定导航，我的navabr会进入真正的导航栏位置。 我不知道如何为它设置好的选项，我的面板有一个固定的高度，所以我必须允许溢出。
$(document).ready(function(){ $('#fakeBody').scrollspy({target: "#navbarPnlBody", offset: 50}); // Add smooth scrolling on all links inside the navbar $("#pnlNavBar a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('.scrollbar,#fakeBody').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); OTHER PANEL AND EXTC... Header Section 1
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 2
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 3
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
将其添加到真正的navbar div：
style="position: fixed; width: 100%; z-index: 1;"
你应该得到：
$(document).ready(function(){ $('#fakeBody').scrollspy({target: "#navbarPnlBody", offset: 50}); // Add smooth scrolling on all links inside the navbar $("#pnlNavBar a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('.scrollbar,#fakeBody').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); });
OTHER PANEL AND EXTC... Header Section 1
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 2
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Section 3
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!