2

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

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

所以我想要一个额外的关闭按钮，它有一个固定的位置，但只有当 div 在视口中时才应该显示按钮 - 当我向下滚动到下一个图像容器时，上面容器的 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/

4

1 回答 1

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();
      }
    })
  })
})
于 2012-10-31T13:59:26.000 回答