javascript - 一旦我在特定部分滚动，使某个 id 消失？

Question

当我在特定部分 ID(“#performance-graphs”)中滚动时，试图使特定 ID(#logo)消失，一旦我滚动出该部分，隐藏的 ID 必须再次显示。

请看下面我的代码，目前 id 不起作用，但想法是存在的，不确定我做错了什么。基本上，当它到达图表部分时，我试图通过删除 Logo 来缩小我的主标题。

JQUERY 代码

<script type="text/javascript">
$(document).ready(function() {
$('#performance-charts').scroll(function() {
var scroll = $('#performance-charts').scrollTop();
if (scroll > 10) {
$('#logo').css("display", "hidden").fadeOut(250);
}
else { 
$('#logo').css("display", "block").fadeIn(250);
}
});
});
</script>

HTML 片段正文

<section id="performance-graphs">
<a id="performance-graphs"></a>
<div class="double-space"></div>    
    <div class="centered-wrapper">
        <h1 class="section-title">charting performance</h1>

...............................................................

</div>
</section>

HTML 片段标题

<span itemscope itemtype="http://schema.org/LocalBusiness"><header id="fixed" class="solid-header">
    <div class="centered-wrapper">
    <div itemscope itemtype="http://schema.org/Service"><div itemprop="ServiceType" content="Asset and Fund Management"></div></div>
    <div id="logo"><a href="../index.html"><img src="../images/value_images/VPM_global3a.png" alt="White Fleet Globel Select Opportunities"></a>
      <p><a href="http://www.valueportfolio.co.za" target="_blank" class="link">LU0721514452:USD - Managed by Value Portfolio Managers (Pty) Ltd</a></p></div>
    <a href="../index-backup.html" title="Value Portfolio Home Page"></a><br>
    <a class="nav-btn"><i class="fa fa-bars"></i><span>Menu</span></a>BaB

非常感谢您的帮助。

Answer 1

好的，给你。我用了你的 fiddle 并更新了它 HERE

基本上你有错误的代码，因为 id 应该是唯一的! (我刚刚向其中一个重复的 ID 添加了另一个字符。

我刚刚像这样更新了你的 JS 代码:

 if ($(document).scrollTop() > $('section#performance-graphss').offset().top) {

因为你需要你的图形容器的offset().top 并将其与qhole 文档的滚动位置进行比较。

---

编辑:

这是FIDDLE吗？帮助？

我刚刚添加了另一个隐藏元素的检查:

 $('section#performance-graphss').offset().top + $('section#performance-graphss').height() > $(document).scrollTop()

因此，当您滚动经过容器时， Logo 会再次display: blick;。

注意我添加的 CSS:容器需要高度。

#performance-graphss {
  width: 100%;
  height: 700px;
  display: block;
}