javascript - 不可见的内容没有像预期的那样隐藏

Question

我希望隐藏不在 View (视口(viewport)？)中的内容，除了第一个 <article> , 直到用户向下滚动页面足够多(可能直到下一个 <article> 容器的顶部达到距视口(viewport)底部约 200 像素)。

每个<article>得到hidden使用 javascript 类，当用户向下滚动足够多时 hidden使用 javascript 删除类。

在“我的网站”(下面的链接)上，它显示了前 2 个 <article>的，当它应该只显示第一个时。我认为是页面顶部的图像导致了问题，但我不知道为什么。

My Site

HTML(只显示 1 个 <article> block ，因为它们都是一样的)

<div class="main-2">
  <!-- There are multiple <article> blocks similar to this -->
  <article class="post">
    <a href="image.png" rel="fwpopup" title="Image Name" class="image-link" target="_blank">
      <img src="image.png" class="image" alt="Site Name">
    </a>
    <h1 class="h-1">Site Name</h1>
    <div class="entry">
      <ul class="work-features">
        <li>Work 1</li>
        <li>Work 2</li>
        <li>Work 3</li>
        <li>Work 4</li>
        <li>Work 5</li>
        <li>Work 6</li>
      </ul>
      <div class="work-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum, neque sed lobortis blandit, tellus magna efficitur velit, sit amet faucibus mi urna et nulla. Fusce varius orci tortor, vitae.
      </div>
    </div>
    <a href="" class="button-more" target="_blank" title="View Website">View Website</a>
  </article>
</div>

CSS

* {
    margin:0;
    padding:0;
}
*,
*:before,
*:after {
    box-sizing:border-box;
}
html {
    font-size: 100%;
    overflow-y: scroll
}
html,
body {
    height:100%;
}
body {
    font:normal 12px/1 Optima, Candara, Calibri, Arial, sans-serif;
    text-align:center;
    color:#fff;
}
body:after {
    position: fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url(../images/main_background.png) 50% 180px no-repeat;
    opacity:0.20;
    content:'';
    z-index:-1;
}
.hidden{
    visibility: hidden;
}
.main-2 .image-link {
    display:inline-block;
    width:75%;
}
.main-2 .image-link .image {
    width:100%;
}
[class|=h] {
    margin-bottom:42px;
    font-size:30px;
    font-weight:normal;
    line-height:1;
}
.portfoliopage .main-2 {
    text-align: center;
}
.portfoliopage .image-link {
    max-width: 1267px;
}
.portfoliopage .post:not(:last-child) {
    padding-bottom:60px;
}
.portfoliopage .post:not(:first-child) {
    border-top:1px dotted #d0d0d0;
    padding-top:60px;
}
.portfoliopage .entry {
    display:inline-block;
    width:60%;
    text-align: left;
}
.portfoliopage .entry .work-features {
    display:inline-block;
    width: 26%;
    padding-top:5px;
    vertical-align: middle;
}
.portfoliopage .entry .work-features li {
    font-size: 15px;
    padding-bottom: 5px;
}
.portfoliopage .entry .work-description {
    display:inline-block;
    width: 70%;
    font-size: 18px;
    line-height:1.5;
    vertical-align: middle;
}
.portfoliopage .entry .work-description ul {
    list-style: inside disc;
}
.portfoliopage .post .button-more {
    display: inline-block;
    padding: 14px 20px;
}

JS

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function() {
  $('.post').each(function() {
    if (!isScrolledIntoView($(this))) {
      $(this).addClass('hidden');
    }
  });
  $(document).on('scroll', function() {
    $('.post.hidden').each(function() {
      if (isScrolledIntoView($(this))) {
        $(this).removeClass('hidden').css({
          'display': 'none'
        }).fadeIn();
      }
    });
  });
})

Answer 1

为您的第一个 article 标签设置与图片一样高的 height。

图像在从 DOM 的其余部分加载时滞后。 document.ready 在图像完全加载和拉伸(stretch)文章并将其他文章推到视口(viewport)之外之前开始工作。

在 document.ready 触发时，第二和第三篇文章在技术上处于视口(viewport)中。

为文章提供固定的初始高度应该可以解决您的问题。

或者，使用 $(window).load 代替 $(document).ready。 window.load 在所有内容(DOM 和图像)完全加载后触发。但这可能会降低页面的整体响应速度。