jquery - 仅当父 div 在 View 中时显示固定按钮

Question

我有一个带有一些图像的 div。首先，只显示一行，当我点击“更多”时，显示所有图像。

要关闭 div，我必须滚动到 div 的底部以关闭容器图片较多时，底部距离过远

所以我想要一个额外的关闭按钮，它有一个固定的位置但是只有当 div 在视口(viewport)中时才应该显示按钮 - 当我向下滚动到下一个图像容器时，上面容器的 less 按钮应该消失

我的标记看起来像这样

<article id="1">
    <h1>Titel</h1>
    <a class="weniger" href="#">less</a>

    <ul class="thumbs">
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
        <li>img</li>
    </ul>
    <a class="more" href="#">mehr</a>

</article>

jquery 代码如下所示

jQuery(document).ready(function(){
    jQuery(".more, .weniger").on("click touch",function(){

        var wid = jQuery(this).parent().attr("id");

            jQuery("#"+wid+" .weniger").show();
            jQuery("#"+wid+" .thumbs").css("height","auto");
            jQuery("#"+wid+" .thumbs").css("overflow","auto");

            jQuery(this).text("less");


        return false;
    });
});

CSS

.thumbs{
    height: 182px;
    overflow: hidden;
}

.thumbs li{
    float: left;   
    height: 182px;
    margin: 0 10px 10px 0;
}

.thumbs img{
    height: 100%;        
}

article{
    margin-bottom: 50px;
}

.weniger{
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    float: right;
}

我为此制作了一个 jsfiddle:http://jsfiddle.net/oliverspies/VZFtj/6/

Answer 1

$().offset().top返回元素相对于文档的位置。

$().outerHeight()返回元素大小，包括填充和边框。

$(window).height()返回视口(viewport)大小。

$().scrollTop返回元素滚动条位置

$(window).scroll(...)每当窗口滚动时都会触发事件。

尝试:

$(function(){
  $('article').each(function(){
    var $el = $('.thumbs',this);
    var $w = $(window);
    var $less = $('.weniger', this);
    var $more = $('.more', this);
    $(window).on("scroll resize",function(){
      if( $w.scrollTop() > $el.offset().top + $el.outerHeight()
          || $w.scrollTop() + $w.height() < $el.offset().top
      ){
        $less.hide();
      }else if($more.text()=="more"){
        $less.show();
      }
    })
  })
})