javascript - Bootstrap scroll spy 不适用于 javascript 实现或 <body> 元素内容

这是我的元素的 fiddle ，稍微简单一点。但是你可以看到它设置正确并且根本不起作用，它什么都不做。

我已经尝试调试它 3 天了，我只是......我就是做不到，它在应该的时候不起作用。我已经包含了 jquery、bootstraps js 和 bootstraps css，我创建了自己的 .active 类，并且我尝试执行 <body data-spy="scroll" .. >以及 jsfiddle 上的 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>

最佳答案

根据 Bootstrap 文档，scrollspy 需要 Bootstrap 'nav' 组件才能工作。仔细阅读 here .

关于javascript - Bootstrap scroll spy 不适用于 javascript 实现或 <body> 元素内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38034735/

javascript - Bootstrap scroll spy 不适用于 javascript 实现或 <body> 元素内容

上一篇：javascript - Razor Html.RadioButton 位置到图像中

下一篇：html - 增加视频分辨率但不增加可见尺寸