2

私はいくつかの画像を含むdivを持っています。最初に、1 行だけが表示されます。[その他] をクリックすると、すべての画像が表示されます。

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/

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 に答える