一旦我在特定部分滚动，就会使某个 id 消失

Making a certain id disapear once I scroll within a specific section?

本文关键字：消失 id 滚动 定部      更新时间：2023-09-26

一旦我滚动到特定的部分id（"#performance 图"），试图使特定的id（#logo）消失，一旦我滚动出该部分，隐藏的id必须再次显示出来。

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

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>

网页代码段正文

<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

您的帮助将不胜感激。

好的，

你去吧。我用了你的小提琴并在这里更新了它

基本上你那里有糟糕的代码，因为 id 应该是唯一的！（我刚刚在其中一个重复的ID中添加了另一个字符。

我刚刚像这样更新了您的 JS 代码：

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

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

编辑：

这个小提琴有帮助吗？

我刚刚添加了另一个用于隐藏元素的检查：

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

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

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

#performance-graphss {
  width: 100%;
  height: 700px;
  display: block;
}
相关文章：