10

以下に jQuery .slideUp および .slideDown 関数を用意しまし#showfootershopた。ブラウザ ウィンドウの下部にある divに到達すると、 #footershopdiv が上にスライドし、すぐに下にスライドします。

#footershopがブラウザ ウィンドウの下部にあるときに「上」に表示されたままに#showfootershopなり、ユーザーがブラウザ ウィンドウを上にスクロールするまで下にスライドしないようにするにはどうすればよいですか?

フィドル: http://jsfiddle.net/8PUa9/1/

jQuery:

$(window).scroll(function(){
/* when reaching the element with id "showfootershop" we want to
show the slidebox. */

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if  ($(window).scrollTop() > distanceTop)
        $("#footershop").slideUp();
    else
        $("#footershop").slideDown();

});

フッターの html:

<div id="showfootershop"></div>
<div id="footershop">
    <h1>Shop Links</h1>
</div>
</body>
</html>

CSS:

#footershop {
   height:35px;
   width:100%;
   display: none;
   z-index: 2;
}
4

6 に答える 6

2

slideUp と slideDown の 2 つの関数を使用し、スライダーを表示したり非表示にしたりしたら、それらを切り替えます。

$(function() {

    var slideUp = function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            console.log('At bottom!!');
            //toggle the handlers
            $("#footershop").slideDown(function() {
                $(window).off('scroll', slideUp).on('scroll', slideDown);
            });
        }
    };

    var slideDown = function() {
        if ($(window).scrollTop() + $(window).height() < $(document).height()) {
            //toggle the handlers
            $("#footershop").slideUp(function() {
                $(window).off('scroll', slideDown).on('scroll', slideUp);
            });
        }
    };


    $(window).on('scroll', slideUp);
});​

編集：あなたが抱えている主な問題は、 #footershop が表示されると document.height が増加し、非表示になると減少することだと思います。これは正しいです。これにより、望ましくない動作を引き起こす追加のスクロール イベントが発生します。

このフィドルを確認してください：これを部分的に修正しました。

http://jsfiddle.net/BuddhiP/8PUa9/8/

固定バージョンについては、この JSBin バージョンを確認してください: http://jsbin.com/axobow/2

私がやったことの主なことは、 #footershop が完全に配置されるようになったため、表示または非表示のときにドキュメントのサイズが変更されないことです。

フィドルは期待どおりに機能しますが、div は一番下に配置されません。あなたがそれを修正できることを願っています。

お役に立てれば。

注: フルハイト ウィンドウでフィドルをテストする必要があります。そうしないと、フッターがテキストの途中に表示されるため、フッターが上にスライドして表示されません。

于 2012-12-04T04:27:53.253 に答える
2

あなたが受け入れていない他の回答の何が問題なのかわかりませんが、これが私のものです：

JSFiddle

JS:

$(window).scroll(function() {

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if ($(window).scrollTop() >= distanceTop - 20) {
        $("#footershop").animate({
            'height': '35px'
        }, 'fast');
    }
    else {
        $("#footershop").animate({
            'height': '0px'
        }, 'fast');
    }
});​

CSS:

#footershop {
    height:0px;
    width:100%;
    z-index: 2;
    background:#00ffff;
    position: absolute;
    bottom:0;
    left:0;
    overflow:hidden;
}
body {
    position:relative;   
}

</p>

于 2012-12-11T17:56:28.110 に答える
1

このすべての jQuery の slideUp/slideDown に代わる方法は、CSS を使用して処理することです。

ユーザーが#showfootershop要素に到達したことを検出し、フッターからクラスを追加または削除します。

$(window).scroll(function()
{

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if($(document).scrollTop() >= distanceTop)
         $('#footershop').addClass("show");
    else
         $('#footershop').removeClass("show");
}

次に、CSS を使用して、そのクラスの存在に応じてフッターを表示または非表示にします。

#footershop 
{
    position: fixed;
    height: 0px;
    z-index:999;
    bottom: 0;
    overflow:none;
    
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footershop.show
{
    height:35px;
    
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

上記のように、.showクラスがフッターにある場合は、フッター要素の高さを変更して表示します。次に、CSS トランジションを使用して、この変更をアニメーション化します。

この方法の良いところは、非常に軽量で効率的であることです (特に、同時に多数の jQuery アニメーションを実行している場合)。また、不透明度、テキスト、背景色などのさまざまな変更を簡単にアニメーション化できます。 JS にまったく触れる必要はありません。

jsフィドル

ここにあなたの jsFiddle が変更されています http://jsfiddle.net/DigitalBiscuits/8PUa9/29/

于 2012-12-09T02:20:08.603 に答える
0

上スクロールコードと下スクロールコードの間に小さなバッファーを置くことをお勧めします。

100pxのバッファを入れるために、コードを少し調整しました。

Javascript

$(window).scroll(function() {

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if ($(window).scrollTop() >= distanceTop) {
        $("#footershop").slideDown();
    }
    else if ($(window).scrollTop() < (distanceTop - 100)) {
        $("#footershop").slideUp();
    }
});

デモ

于 2012-12-09T03:27:18.597 に答える
0

slideUp()また、要素を非表示にし、非表示の要素のオフセットが である[0,0]ため、インスタント フッターが非表示になるのdistanceTopは負です。高さをゼロにアニメートして同じ視覚的結果を得ることができます。フッターを非表示にしていないため、topオフセットは同じままです。

于 2012-12-04T04:56:10.853 に答える
0

要素までスクロールしようとすると面倒です。ページの一番下を使用してください。

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $("#footershop").slideDown();
    }
    else {
        $("#footershop").slideUp();
    }
});​

jsfiddle

于 2012-12-13T03:13:15.613 に答える