Question

当您向下滚动一定数量时，我的内容会从页面底部向上滑动。

点击按钮将关闭上滑。

但如果继续向下滚动页面，则会再次出现上滑。

如果只点击一次关闭按钮，如何让幻灯片一劳永逸地消失？

这是脚本：

$(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>

Answer 1

当用户关闭内容时设置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;
    }); 
})

滚动时滑动 - 关闭按钮不令人满意

1 个答案: