Question

嘿，我对bootstrap和Jquery还是很陌生，并开始将Scrollspy与navbar结合使用，效果很好。它看起来像这样：

    <body data-spy="scroll" data-target=".navbar" data-offset="65" onload="typeWriter()">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="opacity:0.4;">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section4"> Section 4</a>
    </li>
  </ul>
</nav>

然后，我刚刚添加了滚动激活功能，到目前为止，该功能已停止工作。我认为多重滚动功能会造成问题，但不知道如何处理。

<script type="text/javascript">
      function getScrollTop(){
        if(typeof pageYOffset!= 'undefined'){
          return pageYOffset;
        }
        else{
          var b = document.body; //IE 'quirks'
          var d = document.documentElement; //IE with doctype
          d = (d.clientHeight)? d : b;
          return d.scrollTop;
        }
      }    

      $(window).on("scroll", function(){
        if(getScrollTop() >= 500){
          $(window).off("scroll");

            jQuery('.skillbar').each(function(){
            jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
            },4500);
    });

        };
      });
    </script>

我在那里跟踪滚动，当到达div时，我要为一些小节设置动画，然后删除滚动跟踪器以仅动画一次。因此，是的，添加了效果很好的功能后，导航栏停止了跟踪页面的位置。我希望有一个解决方案，因为我也想稍后再对时间轴动画使用另一个滚动跟踪。：D

Answer 1

是的，问题在于这两件事使用了相同的滚动功能。我刚拿出

$(window).off("scroll");

现在都可以使用。

Bootstrap scrollspy添加其他滚动功能后停止工作

1 个答案: