仅当父div在视图中时才显示固定按钮

Question

我有一个包含一些图像的div。首先，只显示一行，当我单击“更多”时，所有的图像都会显示出来。

要关闭div，我必须滚动到div的底部以关闭容器当有许多图像时，到底部的距离太远。

所以我想要一个额外的关闭按钮，它有一个固定的位置，但只有当div在视区中时，该按钮才会显示当我向下滚动到下一个图像容器时，上面容器中较少的按钮应该会消失。

我的标记如下所示

<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()返回视口大小。

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