javascript - jQuery 滚动事件不适用于部分

Question

我正在尝试使用 jQuery Scroll 事件制作一个简单的滚动 spy ，但失败了。这是我的 JavaScript 部分:

<script>
 $(document).ready(function(){
   $("#credit_card").scroll(function(){
     console.log('OK');
   });
 });
</script>

和 HTML 部分:

<section class="method first-of-group" id="credit_card">
...
</section>

正如您可能已经猜到的，console.log 仅用于测试。该部分位于 div 下，该 div 具有“content”id。如果我更改“内容”id 的 JavaScript 代码，它就可以工作。真的很奇怪。

如果您想观看直播，请访问here .

提前致谢。

Answer 1

阅读评论并真正理解您的意思后，这就是您正在寻找的解决方案。

 $(document).ready(function(){
   $("#content").scroll(function(){

     // when the user scrolls, we want to detect at what section they currently are. 
     // This can be calculated, by comparing the current window scrolltop to the position and height of the section elements.
    var currentTopOffset = $(document).scrollTop();

     $('section').each(function(){
         var min = $(this).offset().top;
         var max = $(this).offset().top + $(this).height();
         if(currentTopOffset > min && currentTopOffset < max){
           // current section
           // do something here, like getting a value from an input type hidden with the section name
         }
     });
   });
 });

我希望这是您正在寻找的东西，或者至少是您入门的东西。