使用jQuery检测用户是否滚动至info-right div底部100px处

我想要实现检测用户是否滚动到info-right这个div底部100px的位置，若满足条件则弹出提示并为.info-left元素添加bottom类，但我编写的代码无法正常运行。

原代码 #

JavaScript

var stickyTop = $('.info-left').offset().top;
$(window).scroll(function() {
  if ($(window).scrollTop() >= stickyTop) {
    $('.info-left').addClass('sticky');
  } else {
    $('.info-left').removeClass('sticky');
  }
});
$(window).scroll(function() {
  if ($('info-right').scrollTop() + $(window).height() > $(document).height() - 100) {
    alert("near bottom!");
    $('.info-left').addClass('bottom');
  } else {
    $('.info-left').removeClass('bottom');
  }
});

CSS

.info-content { display: flex; width: 100%; position: relative; }
.info-left { width: 300px; background: red; flex-shrink: 0; padding: 10px; }
.info-right { background: green; flex-grow: 1; padding: 10px; }
.bottom { background: yellow; height: 500px; }
.info-left.sticky .left-inner { position: fixed; top: 0; width: 300px; }

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="info-content single container">
  <div class="info-left">
    <div class="left-inner">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a. Dignissim enim sit amet venenatis. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas.
    </div>
  </div>
  <div class="info-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a. Dignissim enim sit amet venenatis. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Elementum eu facilisis sed odio. Interdum posuere lorem ipsum dolor sit amet. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. At urna condimentum mattis pellentesque id nibh tortor id. Ullamcorper sit amet risus nullam. Orci dapibus ultrices in iaculis nunc sed augue lacus. In tellus integer feugiat scelerisque varius morbi enim. Ac turpis egestas sed tempus. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Tortor aliquam nulla facilisi cras fermentum. At imperdiet dui accumsan sit. Commodo ullamcorper a lacus vestibulum sed arcu. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Urna nunc id cursus metus aliquam eleifend mi in. Mi in nulla posuere sollicitudin aliquam. Pharetra pharetra massa massa ultricies mi quis. Accumsan tortor posuere ac ut. In fermentum posuere urna nec. Fames ac turpis egestas sed tempus urna et. Mollis aliquam ut porttitor leo a. Nisi quis eleifend quam adipiscing vitae. Nisl tincidunt eget nullam non. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Ut etiam sit amet nisl purus in mollis nunc. Eget lorem dolor sed viverra ipsum nunc. Pellentesque nec nam aliquam sem et. Eget felis eget nunc lobortis. Enim nec dui nunc mattis enim ut tellus elementum. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Ac tortor vitae purus faucibus ornare suspendisse. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Dignissim suspendisse in est ante in nibh. Id cursus metus aliquam eleifend. Imperdiet dui accumsan sit amet. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacus sed turpis tincidunt id aliquet risus feugiat. In metus vulputate eu scelerisque felis. Consectetur purus ut faucibus pulvinar elementum integer enim. Tellus orci ac auctor augue mauris augue. Senectus et netus et malesuada fames ac turpis egestas integer. Vel fringilla est ullamcorper eget. Proin libero nunc consequat interdum varius sit amet. Nibh venenatis cras sed felis eget. Purus ut faucibus pulvinar elementum integer enim neque. Risus quis varius quam quisque. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Et netus et malesuada fames ac turpis egestas. Arcu ac tortor dignissim convallis aenean. Nibh praesent tristique magna sit. Turpis egestas maecenas pharetra convallis posuere. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Erat velit scelerisque in dictum non consectetur a. Sagittis vitae et leo duis ut diam quam. At auctor urna nunc id cursus metus aliquam eleifend. Quis vel eros donec ac odio tempor orci dapibus ultrices. Faucibus a pellentesque sit amet porttitor eget. Auctor elit sed vulputate mi sit. Eget gravida cum sociis natoque. Morbi tempus iaculis urna id. Placerat orci nulla pellentesque dignissim enim. Quisque egestas diam in arcu cursus euismod quis. Leo vel orci porta non. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Est ullamcorper eget nulla facilisi etiam. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sed tempus urna et pharetra pharetra massa massa ultricies. At ultrices mi tempus imperdiet. Parturient montes nascetur ridiculus mus mauris. Et odio pellentesque diam volutpat commodo sed egestas. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Mauris vitae ultricies leo integer malesuada nunc vel. Auctor augue mauris augue neque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Malesuada nunc vel risus commodo. Enim ut sem viverra aliquet eget sit amet.
  </div>
</div>
<div class="bottom">
  Some more content at the bottom
</div>

问题排查与修正 #

我帮你找到了代码里的几个关键问题，调整后就能正常运行了：

1. 选择器错误

原代码里的$('info-right')缺少类选择器的.，应该写成$('.info-right')，否则jQuery找不到目标元素。

2. 滚动判断逻辑错误

info-right不是独立的滚动容器，它的内容是随页面整体滚动的，所以不能用它的scrollTop()来判断。正确的逻辑应该是计算info-right底部往上100px的位置，然后判断窗口滚动是否到达这个位置：

• 计算info-right的总高度：$('.info-right').offset().top + $('.info-right').outerHeight()
• 减去100px得到临界位置：$('.info-right').offset().top + $('.info-right').outerHeight() - 100
• 当窗口滚动的距离加上窗口高度大于等于这个临界值时，就说明滚动到了目标区域

3. 合并滚动事件（性能优化）

原代码绑定了两个scroll事件，其实可以合并成一个，减少重复监听，提升页面性能。

修正后的代码 #

JavaScript

var stickyTop = $('.info-left').offset().top;
// 计算info-right底部往上100px的临界位置
var rightBottomThreshold = $('.info-right').offset().top + $('.info-right').outerHeight() - 100;

$(window).scroll(function() {
  var scrollPos = $(window).scrollTop();
  var windowHeight = $(window).height();

  // 处理sticky逻辑
  if (scrollPos >= stickyTop) {
    $('.info-left').addClass('sticky');
  } else {
    $('.info-left').removeClass('sticky');
  }

  // 处理接近info-right底部的逻辑
  if (scrollPos + windowHeight >= rightBottomThreshold) {
    alert("near bottom!");
    $('.info-left').addClass('bottom');
  } else {
    $('.info-left').removeClass('bottom');
  }
});

说明

• 我把两个滚动事件合并成了一个，同时处理sticky和bottom类的添加/移除
• 预计算了rightBottomThreshold这个临界值，避免每次滚动都重复计算DOM元素的位置，提升性能
• 修复了选择器错误，确保能正确选中info-right元素

现在你可以测试这段代码，当滚动到info-right底部100px范围内时，会弹出提示，同时.info-left会变成黄色并增加高度。

内容的提问来源于stack exchange，提问作者user38208