个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:05:33 25 4
gpt4 key购买 nike

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

https://jsfiddle.net/ybarpz3x/8/

我已经尝试调试它 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/

25 4 0
文章推荐： linux - 将十六进制地址直接分配给 LKM 代码中的指针但得到不同的结果
文章推荐： java - XML 文本元素空白
文章推荐： python - Django 查看相同 url 模式请求的执行顺序？
文章推荐： python - 如何使用Python3从Centos连接到windows 2012机器
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com