jquery - 如何检测滚动高度并使用 jQuery 相应地更改标题

Question

我想为我的网站创建一个包含不同国家/地区商店的列表。我想知道如何知道滚动已到达我想要的区域，以便我可以更改顶部标题中的文本。

所以我的想法是: 我应该向 li 添加类以指示每个区域的最后一个元素(“uk-last”和“us-last”和“jp-last”) 所以默认标题将显示“英国”。当滚动到“uk-last”时，它将把标题文本替换为 US，对 JP 执行相同的操作。

我想知道检测最后一个元素是否正确，或者实际上我应该检测每个区域的第一个元素。

我不擅长 jQuery/js，所以我对我要做什么感到很困惑。如果您有任何提示/解决方案，请给我一些意见。

非常感谢!!!

.title {
  background: yellow;
  color: red;
  font-size: 18px;
  text-align: center;
  width: 100%;
}

ul li {
  margin: 10px;
  background: #f4f4f4;
}

.container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.scroll {
  overflow-y: auto;
}

<div class="container">
  <p class="title">UK</p>
</div>
<div class="scroll">
  <ul>
    <li>UK Store 1<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>UK Store 2<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li class="uk-last">UK Store 3<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>US Store 1<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>US Store 2<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li class="us-last">US Store 3<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>JP Store 1<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>JP Store 2<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>JP Store 3<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li>JP Store 4<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
    <li class="jp-last">JP Store 5<br>XXXXX<br>XXXXX<br>XXXXX<br>XXXXX</li>
  </ul>
</div>

Answer 1

这应该有帮助

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) { 
        //change uk to us
        $('.title').html('US');
    } 
});