Question

除了第一个<article>之外，我希望隐藏内容不在视图中（视口？），直到用户向下滚动页面（可能直到下一个<article>容器的顶部到达距离视口底部约200px。）

每个<article>使用javascript获取hidden类，当用户向下滚动时，使用javascript删除hidden类。

On＆＃34;我的网站＆＃34; （下面的链接），它显示前2 <article>，它应该只显示第一个。<article>＆＃39}。我认为它是导致问题的页面顶部的图像，但我不知道为什么。

HTML（仅显示1 <div class="main-2">  <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>块，因为它们完全相同）

* {
    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;
}

CSS

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();
      }
    });
  });
})

JS

<?php
namespace namescape/of/the/class;

class FilterTypeCacheService extends BaseService implements IFilterTypeCacheService
{

    private $searchFilterService;
    private $filterCacheHandler;

    function __construct(SearchFilterService $searchFilterService, IFilterTypeCacheHandler $filterCacheHandler){
        $this->searchFilterService = $searchFilterService;
        $this->filterCacheHandler = $filterCacheHandler;
    }

    public function cacheTopFilters($type,$keyValuePair,$limit){
        $filters = $this->searchFilterService->getAllFilters($type,$keyValuePair);
        $this->filterCacheHandler->deleteFiltersBulkFromCache();
        $this->filterCacheHandler->SaveFiltersBulk($filters,$type);
    }

    public function getTopFilters(){
        $topFilters = $this->filterCacheHandler->getCachedTopFilters();
        return $topFilters;
    }
}

Answer 1

将第一个article代码设为height，与图片一样高。

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

在document.ready开火时，第二和第三篇文章在技术上属于视口。

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

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

不在视图中的内容不会像预期的那样隐藏

1 个答案: