关闭屏幕时的消失元素

时间:2016-04-25 08:25:23

标签: jquery scroll

我试图在屏幕显示时消除元素,然后显示新元素。 问题是,即使它不在屏幕外,但在每个卷轴上,该元素也会消失。

这是我的代码:

$(window).scroll(function () {
    scrollHide('#zabiegi');
});

function scrollHide(sectionId) {
    if ($(window).width() < 968) {
        $(sectionId).each(function () {
            if (($(sectionId).find('.two').offset().top - $(window).scrollTop()) < 20) {
                $(sectionId).find('.two').stop().fadeOut( "slow", function() {
                    $(sectionId).find('.one').fadeIn();
                    updateMargin(sectionId,'.one');
                });
            } 
        });
    }
}

这次我也尝试了不同的方法 - 没有任何反应,如果陈述总是假的话。

$(window).scroll(function () {
    scrollHide('#zabiegi');
});

function scrollHide(sectionId) {
    if ($(window).width() < 968) {
        $(sectionId).each(function () {

            var off = $(sectionId).find('.two').offset();
            var t = off.top;
            var h = $(sectionId).find('.two').height();
            var docH = $(window).height();
            console.log(t > 0 && t + h < docH);

            if (t > 0 && t + h < docH) {
                $(sectionId).find('.two').stop().fadeOut( "slow", function() {
                    $(sectionId).find('.one').fadeIn();
                    updateMargin(sectionId,'.one');
                });
            } 
        });
    }
}

1 个答案:

答案 0 :(得分:0)

Ok, i've found a solution. The problem was in conditional statement if. Here is the code:

function scrollHide(sectionId) {
    if ($(window).width() < 968) {
        $(sectionId).each(function () {
            if (($(sectionId).find('.two').offset().top + $(sectionId).find('.two').outerHeight() - $(window).scrollTop()) < 0  ) {
                $(sectionId).find('.two').stop().fadeOut( "slow", function() {
                    $(sectionId).find('.one').fadeIn();
                    updateMargin(sectionId,'.one');
                });
            } 
        });
    }
});

But still got problem... above script works only when i scroll down not up ... so i've added to the conditional statement:

if (($(sectionId).find('.two').offset().top + $(sectionId).find('.two').outerHeight() - $(window).scrollTop()) < 0 || ($(sectionId).find('.two').offset().top - $(sectionId).find('.two').outerHeight() + $(window).scrollTop()) < 0 ) {

And in console.log output is ok - it shows 0 when i above the element, but still not working...