个人中心
gpt4 book ai didi

jquery - 使用 JQuery 滚动 spy

转载 作者：行者123 更新时间：2023-11-28 14:12:54 25 4
gpt4 key购买 nike

我在顶部有一个标题，在下面有 3 列。左栏有一个菜单，中间栏有一个文本容器，还有一个右栏。

当页面向上滚动时，菜单转到固定位置，有效。

问题:当页面向上滚动时，每个菜单都会高亮(Scroll Spy)，但只有最后一个菜单高亮。

请帮忙!

sample 在 jsfiddle

JS

$(function () {
    $(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();      
    if (scrollValue > 100) {
      $('#spy').addClass('affix');

      var elemts = $('.scroll-section');
      elemts.each(function(index) {
        var id = $(this).attr('id');
        console.log(id)
        var navElem = $('a[href="#' + id + '"]');
     navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
      })
      } 
    else{
        $('#spy').removeClass('affix');
      }

    });          
});

CSS

.header {
  width: 100%;
  height: 100px;
  background: yellow;
}
.affix {
  position: fixed;
  top: 0;
}
#spy {
  position: fixed;
}
.right-side {
  background: gray;
  height: 120px;
}

HTML

<body>
<div class="header">

</div>
<div class="row">
<div class="col-sm-3">
<div  id="spy">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#scroll1">First Section</a>             </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll2">Second Section</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll3">Third Section</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll4">Fourth Section</a>
    </li>
  </ul>
  </div>
</div>
<div class="col-sm-7">
  <div class="scroll-section" id="scroll1">
    <h2>First Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll2">
    <h2>Second Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll3">
    <h2>Third Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll4">
    <h2>Fourth Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
</div>
<div class="col-sm-2">
  <div class="right-side">

  </div>
</div>
</div>
</body>

最佳答案

您没有检查每个部分的顶部是否超过了窗口的顶部。在事件类的添加/删除周围添加此 if 语句:

if ( scrollValue > $(el).offset().top  ){
   var id = $(el).attr('id');
   var navElem = $('a[href="#' + id + '"]');
   navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
}

jsFiddle Revised Demo 

$(function () {
        $(window).on('scroll', function (event) {
            var scrollValue = $(window).scrollTop();
            if (scrollValue > 100) {
              $('#spy').addClass('affix');

              var els = $('.scroll-section');
              els.each(function(index, el) {
                if ( scrollValue > $(el).offset().top  ){
                  var id = $(el).attr('id');
                  var navElem = $('a[href="#' + id + '"]');
                  navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
                }
              });
            } else {
              $('#spy').removeClass('affix');
            }
        });          
    });
.header {
  width: 100%;
  height: 100px;
  background: yellow;
}
.affix {
  position: fixed;
  top: 0;
}
#spy {
  position: fixed;
}
.right-side {
  background: gray;
  height: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<body>
<div class="header">

</div>
<div class="row">
<div class="col-sm-3">
<div  id="spy">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#scroll1">First Section</a>             </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll2">Second Section</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll3">Third Section</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#scroll4">Fourth Section</a>
    </li>
  </ul>
  </div>
</div>
<div class="col-sm-7">
  <div class="scroll-section" id="scroll1">
    <h2>First Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll2">
    <h2>Second Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll3">
    <h2>Third Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class="scroll-section" id="scroll4">
    <h2>Fourth Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
</div>
<div class="col-sm-2">
  <div class="right-side">
  
  </div>
</div>
</div>
</body>

关于jquery - 使用 JQuery 滚动 spy ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56284182/

25 4 0
文章推荐： jquery - FullCalendar 无法正确加载正文
文章推荐： jquery/css 在 IE 中的 jquery show 上更改 css
文章推荐： html - 设置 mat-grid 中列的比率
文章推荐： css - 如何使用 CSS 覆盖禁用的 mat-menu-item 的行为？
行者123
个人简介

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

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