Question

我想创建一个按钮，该按钮会在用户滚动screen.availheight后显示，但在用户点击底部后消失，我希望它为(screen.availheight * 5)。我的按钮似乎是故障，偶尔也不起作用。这是我的代码;

    jQuery(document).ready(function(){
    var offset1 = (screen.availHeight);
    var offset2 = (screen.availHeight * 5);
    var duration2 = 500;
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > offset1){
            jQuery('.gdb').fadeIn(duration2);
        } else {
            jQuery('.gdb').fadeOut(duration2);
        }
    });
});

注意：我删除了按钮故障所产生的代码。使用上面的代码，按钮仅在用户滚动offset1

后显示

Answer 1

这段代码可能适合你。

if($(document)[0].scrollHeight>0 && $(document)[0].scrollHeight < $(document).height()){
$('.gdb').fadeIn();
}

elseif($(document)[0].scrollHeight == $(document).height()){
$('.gdb').fadeOut();
}

Answer 2

试试这段代码：

var btn_visible = 0;//used this variable so that button fadeIn/fadeOut does not fire unnecessary

$( window ).scroll(function(e) {

    var offset1 = (screen.availHeight);
    var offset2 = (screen.availHeight * 2);
    var duration2 = 500;

    if ($(this).scrollTop() > offset1 && $(this).scrollTop() < offset2 && btn_visible==1){
        jQuery('.gdb').fadeOut(duration2);
        btn_visible = 0;
    } else if($(this).scrollTop() > offset2 && btn_visible==0){
        $('.gdb').fadeIn(duration2);
        btn_visible = 1;
    }
});

按钮淡入/淡出故障/不起作用。

2 个答案: