Question

一旦我滚动特定的部分ID（“＃performance-graphs”），尝试使特定的id（#logo）消失，隐藏的id必须在滚动出该部分后再次显示。

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

JQUERY CODE

<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 SNIPPET BODY

<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 SNIPPET HEADER

<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

好的，你去吧。我用你的小提琴并更新它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()

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

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

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

在特定部分滚动后，某个ID会消失吗？

1 个答案: