简体   繁体   English

添加另一个滚动功能时,Bootstrap scrollspy 停止工作

[英]Bootstrap scrollspy stoped working when added another scroll function

Hey I'm pretty new with bootstrap and Jquery and started to use a scrollspy with a navbar what works well.嘿,我对引导程序和 Jquery 很陌生,并开始使用带有导航栏的滚动间谍,效果很好。 And its looks like that:它看起来像这样:

    <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>

Then I just added a scroll activated function and it stopped working so far.然后我刚刚添加了一个滚动激活功能,到目前为止它停止工作。 I think the multiple scroll function makes the problem but don't know how to deal with that.我认为多重滚动功能会产生问题,但不知道如何处理。

<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>

There I track the scrolling and when reach the div what I want animate some bars, then deleting the scroll tracker to only animate one time.在那里我跟踪滚动,当到达 div 时我想要动画一些条,然后删除滚动跟踪器只动画一次。 So yes after added that function that works well but the navbar stopped tracking where the page at.所以是的,在添加了该功能后,该功能运行良好,但导航栏停止跟踪页面所在的位置。 I hope there is a solution to that because I also want to use another scroll tracking later for a timeline animation.我希望有一个解决方案,因为我还想稍后为时间轴动画使用另一个滚动跟踪。 :D :D

Yes The problem was the two thing uses the same scroll function.是的问题是这两件事使用相同的滚动功能。 I just took out the我刚拿出

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

and both works now.现在两者都有效。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM