未查看的内容不像预期的那样隐藏。

Question

我想要看不见的内容(视图？)要隐藏起来，除非第一个<article>，直到用户足够向下滚动页面(可能直到下一个<article>容器的顶部从视图端口底部到达200 to )。

每个<article> get都是使用javascript的hidden类，当用户已经足够向下滚动时，使用javascript删除hidden类。

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

我的网站

HTML (只显示一个<article>块，因为它们都是相同的)

<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开始工作之前，您的图像完全加载和延伸文章和推送其他文章以外的视口。

在document.ready启动时，第二篇和第三篇文章技术上都在视图中。

给出文章的初始高度应该可以解决你的问题。

或者，使用$(document).ready代替$(window).load。window.load在全部加载(DOM和图像)之后触发。但这可能会减慢页面的整体响应速度。