1

一定量下にスクロールすると、ページの下から上にスライドするコンテンツがあります。

ボタンをクリックすると、スライドアップが閉じます。

ただし、ページを下にスクロールし続けると、スライドアップが再び表示されます。

[閉じる]ボタンを1回だけクリックした場合に、スライドアップを完全に非表示にするにはどうすればよいですか？

スクリプトは次のとおりです。

$(document).ready(function(){ 
$(window).scroll(function(){ 
var h = $('#container').height(); 
var y = $(window).scrollTop();

        if( y > (h*.25) ) { 
            $("#btmsUpContainer").slideDown("slow"); 
        } else { 
            $("#btmsUpContainer").slideUp("slow"); 
        } 
}); 

$('.close-it').bind('click', function() {
        $("#btmsUpContainer").slideUp("slow"); 
    return false;
}); 
})

CSSは次のとおりです。

#btmsUpContainer { position: fixed; width: 170px; bottom: 29px; z-index: 7777; margin: 0; padding: 0; display: none; }
#btmsUp { left: 0; width: 170px; margin: 0; }
#btmsUp .close-it { position: absolute; left: 160px; top: 12px; right: 0; z-index: 7778; width: 10px; }

ページコードは次のとおりです。

<div id="btmsUpContainer">
<div id="btmsUp">

<span class="close-it"><a href="#"><img src="close-it.png" style="width: 10px; height: 10px; border: 0;"></a></span><br />

This is stuff that appears in the box that slides up.

</div>
</div>
4

1 に答える 1

2

hiddenユーザーがコンテンツを閉じるときに変数を設定し、スライドする前にそれを確認します。

$(document).ready(function(){ 
    var hidden = false; //Initialize the 'hidden' variable to 'false'
    $(window).scroll(function(){ 
        if(!hidden){ //Check if the user has hidden the content
            var h = $('#container').height(); 
            var y = $(window).scrollTop();
            if( y > (h*.25) ) { 
                $("#btmsUpContainer").slideDown("slow"); 
            } else { 
                $("#btmsUpContainer").slideUp("slow"); 
            } 
        }
    }); 

    $('.close-it').bind('click', function() {
        $("#btmsUpContainer").slideUp("slow");
        hidden = true; //Set the 'hidden' variable to 'true'
        return false;
    }); 
})
于 2012-12-05T23:39:05.087 に答える