Question

我遇到以下问题。我有一个DIV single-help，当从顶部滚过-300px时，它会从0px动画到900px。我正在使用此代码。

jQuery(window).scroll(function() {
    var delayms = "900"; // mseconds to stay color
        if (jQuery(this).scrollTop() > 900) {
            jQuery('.single-help').stop().animate({ bottom: '0px' });
        } else $(".single-help").click(function (e) {
            jQuery('.single-help').stop().animate({ bottom: '-300px' });
                jQuery('.single-help').css('display','none').delay('delayms');
        })
    });

这一切都有效，当我滚过900px时会出现DIV。但是当我到达页面的页脚时。它涵盖了footer DIV。现在我试图让.single-help DIV在到达页脚时停止。为此，我正在使用此代码：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        jQuery('.single-help').stop().animate({ bottom: '0px' });
       $('.single-help').addClass('fixed_button');
   }else{
       $('.single-help').removeClass('fixed_button');
   }
});

这个CSS：

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: 270px !important;
}

这会阻止DIV覆盖页脚内容。但是，现在问题。当我到达页面底部并向上滚动时，看起来代码jQuery('.single-help').stop().animate({ bottom: '0px' });正在重复。 DIV single-help跳至300px左右，动画向下跳回0px。我无法理解为什么会发生这种情况。

有谁知道如何解决这个问题或者告诉我更多关于为什么会这样的问题？我认为这可以做得更简单......谢谢。

我做了一个小提琴我不像我的网站那样工作，但它确实表明当你到达顶部时向上滚动时动画重复两次。 https://jsfiddle.net/r31dnqm9/

Answer 1

我解决了这个问题。我将动画从-300px移至0px，并使用opacity添加了fadeIn效果。这对我有用，我只是将代码留在这里以供将来参考：

jQuery(window).scroll(function() {
    var delayms = "2000"; // mseconds to stay color
        if (jQuery(this).scrollTop() > 900) {
            jQuery('.single-help').animate({'opacity':'1'},500);
        } else 
        $(".closebutton-footer").click(function (e) {
          $('.single-help').animate({'opacity':'0'},500);
          $('.single-help').css('display', 'none').delay('delayms');
        })
    });
jQuery(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 250) {
        $('.single-help').addClass('fixed_button');
        } else 
        $('.single-help').removeClass('fixed_button');
    });

Answer 2

做某种碰撞检测怎么样？如果元素到达页脚，则更改其显示。这是一个简单的碰撞检测脚本。

function CheckDiv()
{
var ediv1 = document.getElementById('DIV1');
var ediv2 = document.getElementById('DIV2');

 ediv1.top = $(ediv1).offset().top;
 ediv1.left = $(ediv1).offset().left;
 ediv1.right = Number($(ediv1).offset().left) + Number($(ediv1).width());
 ediv1.bottom = Number($(ediv1).offset().top) + Number($(ediv1).height());

 ediv2.top = $(ediv2).offset().top;
 ediv2.left = $(ediv2).offset().left;
 ediv2.right = Number($(ediv2).offset().left) + Number($(ediv2).width());
 ediv2.bottom = Number($(ediv2).offset().top) + Number($(ediv2).height());

if (ediv1.right > ediv2.left && ediv1.left < ediv2.right && ediv1.top < ediv2.bottom && ediv1.bottom > ediv2.top)
 {
alert("hi");
}

if (ediv1.left > ediv2.left && ediv1.top > ediv2.top && ediv1.right < ediv2.right && ediv1.bottom < ediv2.bottom)
 {
alert("hello");
    }
}

Div出现在＆gt; 900px滚动并停在页脚div

2 个答案: