Bootstrap滾動間諜不適用於javascript實現或<body>元素內容

這是我的項目的一個小提琴，有點簡單。但是你可以看到它設置正確並且根本不起作用，它什麼都不做。Bootstrap滾動間諜不適用於javascript實現或<body>元素內容

我一直在試圖調試這3天，我只是....我只是不能，它只是沒有當它應該工作。我已經包含了jquery，bootstraps js和bootstraps css，我創建了自己的.active類，並且嘗試了執行jsfiddle中的<body data-spy="scroll" .. >和javascript實現。

請幫忙，謝謝。

$(document).ready(function(){ 
 
    // Cache selectors 
 
    var lastId, 
 
     topMenu = $("#navmenu"), 
 
     topMenuHeight = topMenu.outerHeight()+15, 
 
     // All list items 
 
     menuItems = topMenu.find("a"), 
 
     // Anchors corresponding to menu items 
 
     scrollItems = menuItems.map(function(){ 
 
     var item = $($(this).attr("href")); 
 
     if (item.length) { return item; } 
 
     }); 
 

 
    // Bind click handler to menu items 
 
    // so we can get a fancy scroll animation 
 
    menuItems.click(function(e){ 
 
    var href = $(this).attr("href"), 
 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
 
    $('html, body').stop().animate({ 
 
     scrollTop: offsetTop 
 
    }, 300); 
 
    e.preventDefault(); 
 
    }); 
 

 
    var navHeight = $("#navmenu").outerHeight(true) ; 
 

 
    // Bind to scroll 
 
    $(window).scroll(function(){ 
 
    // Get container scroll position 
 
    var fromTop = $(this).scrollTop()+navHeight; 
 

 
    var navCollapse = 450; 
 

 
    if (fromTop > navCollapse) { 
 
     $("nav li").addClass("top-menu-collapsed") 
 
    }; 
 

 
    if (fromTop <= navCollapse) { 
 
     $("nav li").removeClass("top-menu-collapsed") 
 
    };    
 
    }); 
 

 
    // Add scrollspy to <body> 
 
}); 
 
$('window').load(function(){ 
 
    $('body').scrollspy({target: '#navmenu', offset: navHeight}); 
 
});

@import "https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900&subset=latin-ext"; 
 
.no-side-padding { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 

 
body { 
 
    position: relative; } 
 

 
nav { 
 
    text-align: right; 
 
    position: fixed; 
 
    background-color: #fff; 
 
    width: 100vw; 
 
    z-index: 999999; 
 
} 
 

 
nav ul { 
 
    font-size: 0px; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: auto; 
 
    color: #337ab7; 
 
} 
 

 
nav ul .active { 
 
    box-shadow: 0px 4px 0px #36B8C8; 
 
} 
 

 
nav ul .active a { 
 
    color: #204E76; 
 
} 
 

 
nav ul .top-menu-collapsed { 
 
    padding: 20px 24px; 
 
} 
 

 
nav ul * { 
 
    -webkit-transition: all 200ms ease-out; 
 
    -moz-transition: all 200ms ease-out; 
 
    -ms-transition: all 200ms ease-out; 
 
    transition: all 200ms ease-out; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    font-family: "Raleway", sans-serif; 
 
    text-decoration: none; 
 
    font-size: 1.6rem; 
 
    text-transform: capitalize; 
 
    font-weight: 600; 
 
    position: relative; 
 
    padding: 30px 24px; 
 
} 
 

 
nav ul li a { 
 
    position: static; 
 
    z-index: 555555; 
 
} 
 

 
nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav ul li a:visited { 
 
    text-decoration: none; 
 
} 
 

 
nav ul li div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 666666; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 22 24; 
 
    padding: 0; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
nav ul li:hover, nav ul li:active { 
 
    cursor: hand; 
 
    box-shadow: 0px 4px 0px #36B8C8; 
 
} 
 

 
nav ul li:hover a, nav ul li:active a { 
 
    color: #204E76; 
 
} 
 

 
nav ul li.active:after { 
 
    box-shadow: 0px 4px 0px #36B8C8; 
 
} 
 

 
nav ul li.active:after a { 
 
    color: #204E76; 
 
} 
 

 
.colour-options { 
 
    color: #36B8C8; 
 
    color: #337ab7; 
 
} 
 

 
#options #chair-finishes-gallery ul { 
 
    position: relative; 
 
} 
 

 
#options #chair-finishes-gallery ul li { 
 
    text-align: center; 
 
    width: 31%; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 3%; 
 
} 
 

 
#options #chair-finishes-gallery ul li img { 
 
    max-width: 100%; 
 
    position: relative; 
 
} 
 

 
#options #chair-finishes-gallery span { 
 
    display: none; 
 
    padding-top: 45%; 
 
    padding-left: 2%; 
 
    font-family: sans-serif, inherit; 
 
} 
 

 
#options #big-list ul { 
 
    list-style-type: none; 
 
    columns: 5; 
 
    -webkit-columns: 5; 
 
    -moz-columns: 5; 
 
    padding: 0; 
 
} 
 

 
#options #big-list ul li * { 
 
    display: inline-block; 
 
    text-align: left; 
 
    font-size: 10px; 
 
} 
 

 
#options #big-list ul #li-img { 
 
    width: 150px; 
 
    height: 28px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    border: 2px solid rgba(255, 255, 255, 0.2); 
 
} 
 

 
@media (max-width: 995px) { 
 
    #options #big-list ul { 
 
    list-style-type: none; 
 
    columns: 4; 
 
    -webkit-columns: 4; 
 
    -moz-columns: 4; 
 
    padding: 0; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    #options #big-list ul { 
 
    list-style-type: none; 
 
    columns: 3; 
 
    -webkit-columns: 3; 
 
    -moz-columns: 3; 
 
    padding: 0; 
 
    } 
 
} 
 

 
#about1, #about2, #about3 { 
 
    padding: 300px 100px; 
 
} 
 
} 
 
/*# sourceMappingURL=ncss.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<nav id="thatnav"> 
 
    <ul id="navmenu" > 
 
    <li><a href="#about1"><i style="padding-right: 5px;" class="fa fa-home"></i>Home</a><div></div></li> 
 
    <li><a href="#about2">Ordering</a><div></div></li> 
 
    <li><a href="#about3" target="_blank">Designs</a><div></div></li> 
 
    <li><a href="#hotels-resorts" target="_blank">Hotels/Resorts</a><div></div></li> 
 
    </ul> 
 
</nav> 
 
<section style="background: rgba(50,50,50,1)" id="about1"> 
 
    <div class="container-fluid"> 
 
    <div class="row row-centered"> 
 
     <div style="color: #fff;" class="col-lg-8 col-centered"> 
 
     <h3 class="custom-h2">..now, about your Leisure</h3> 
 
     <p class="custom-p"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section style="background: rgba(50,50,50,1)" id="about2"> 
 
    <div class="container-fluid"> 
 
    <div class="row row-centered"> 
 
     <div style="color: #fff;" class="col-lg-8 col-centered"> 
 
     <h3 class="custom-h2">..now, about your Leisure</h3> 
 
     <p class="custom-p"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section style="background: rgba(50,50,50,1)" id="about3"> 
 
    <div class="container-fluid"> 
 
    <div class="row row-centered"> 
 
     <div style="color: #fff;" class="col-lg-8 col-centered"> 
 
     <h3 class="custom-h2">..now, about your Leisure</h3> 
 
     <p class="custom-p"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet magna in ultricies. In hac habitasse platea dictumst. Sed finibus, purus quis pellentesque suscipit, magna ipsum vulputate tortor, quis vehicula elit leo convallis erat. Suspendisse in dui bibendum diam facilisis suscipit ut tristique enim. Fusce eget lobortis odio. Ut non tortor ut mauris fermentum cursus eu ut eros. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-06-26 lopu

根據所述引導文檔，scrollspy需要引導 '導航' 組件工作。請閱讀here。

來源

2016-06-26 02:52:58 stereoscience

哦，所以你實際上需要使用他們的.nav類，哦。那麼太糟糕了，我自己做了我的導航，並添加引導.nav樣式搞砸了。非常感謝：） – lopu

Bootstrap滾動間諜不適用於javascript實現或<body>元素內容

回答

相關問題