使用JQuery滚动间谍

时间：2019-05-23 23:45:06

标签： jquery html css

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

页面向上滚动时，菜单会转到固定位置，这可以工作。

问题：页面向上滚动时，每个菜单都将突出显示（Scroll Spy），但只有最后一个菜单会突出显示。

请帮助！

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>

1 个答案:

答案 0 :(得分：1)

您没有检查每个部分的顶部是否已超过窗口顶部。在活动类的添加/删除周围添加以下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>

相关问题
最新问题