Div出現在> 900px滾動並停在頁腳div

我遇到以下問題。我有一個DIV single-help，它從-300px動畫到0px當滾動從頂部900px。我正在使用此代碼。Div出現在> 900px滾動並停在頁腳div

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/

來源

2017-02-28 Jay-oh

什麼是擺脫'.stop（）'的結果？ –

如果我刪除了所有的stop（），它仍然會執行第二個動畫。所以沒有改變...（我刪除了我的評論，因爲我認爲它的工作，但它沒有）。 –

你可以創建一個jsfiddle嗎？ –

我修正了這個問題。我將-300px的動畫從0px中刪除，並使用opacity添加了淡入效果。這適用於我，我只是將代碼留在這裏供將來參考：

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'); 
    });

來源

2017-03-01 11:27:12

怎麼樣做某種碰撞檢測？如果元素到達頁腳，則更改其顯示。以下是一個簡單的碰撞檢測腳本。

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"); 
    } 
}

來源

2017-02-28 16:35:08 oompahlumpa

Div出現在> 900px滾動並停在頁腳div

回答

相關問題