當窗口滾動通過另一個元素時顯示一個新的元素

我似乎有一些問題，我的jQuery代碼讓我的克隆導航進入視圖，一旦用戶滾動瀏覽頁面中的特定元素，然後如果他們向後滾動它再次生成動畫。當窗口滾動通過另一個元素時顯示一個新的元素

我寫jQuery代碼是：

$(window).scroll(function() { 
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(); 
var scrollPosition = $(this).scrollTop(); 
if(homeHeight <= scrollPosition) { 
    $('#clonedHeader').animate({'top': '0'}, 300);  
} else { 
    $('#clonedHeader').animate({'top': '-100px'}, 300); 
}

}）;

這裏有一個小提琴：http://jsfiddle.net/ABdLh/

所以那裏有一個克隆的頭，當你滾過homeIntro一部分滑入視圖，以及這就是我想要的想法，但它不會發生我！

任何幫助將不勝感激！謝謝！

來源

2013-02-02 jamie

你沒有在你的提琴添加jQuery庫。我已經更新了它：http://jsfiddle.net/ABdLh/ – insertusernamehere

糟糕，我歡呼！ – jamie

我已經更新了我的答案 – insertusernamehere

我以前忽略了一些代碼。通過簡單地將.stop() - 方法，你可以得到它的工作：

if(homeHeight <= scrollPosition) { 
    $('#clonedHeader').stop().animate({'top': '0'}, 300);  
} else { 
    $('#clonedHeader').stop().animate({'top': '-100px'}, 300); 
}

試試吧here。

來源

2013-02-02 15:34:08 insertusernamehere

就是這樣，似乎完美地工作！ :-) 我只錯過了jquery，因爲我正在衝，這是所有在我的本地版本只是沒有在小提琴。 – jamie

是的（jQuery沒有選擇）是爲什麼它不工作的核心問題。但一些建議 -

像這樣複製html標記是非常糟糕的。您應該使用jQuery/CSS來調整標題在各個滾動位置的樣子。

此外，如果您在Chrome/Firefox中使用控制檯，它可能會幫助您進行調試 - 它會在沒有jQuery的情況下立即爲您提供錯誤。如果你在這裏打開我的小提琴，我留下console.log（）語句來顯示基於滾動的函數被觸發的位置。

動畫像這樣的標題會導致一堆問題。使用jQuery動畫可能會導致構建問題，如果您真的很快上下滾動，這可能會導致同一頁面上同一頁眉。 注意 - 您提到的停止方法將對此有所幫助，但對於大多數動畫問題（特別是懸停）而言，這樣做還不夠，您應該查看諸如「HoverIntent」之類的插件。

最後，它聲明+計算儘可能多的變量的良好做法，因爲您可以在不斷更新的函數之外進行計算 - 您無需連續重新計算您正在比較的頭的高度，將是一個固定的數字。

// this height will be the same, you dont need to constantly calculate it on scroll 
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(), 
    scrollPosition; 

$(window).on('scroll', function() { 
    scrollPosition = $(this).scrollTop(); 
    animateHeight(scrollPosition); 
}); 

function animateHeight(scrollPosition) { 
    if (scrollPosition >= homeHeight) { 
     console.log('yes'); 
     $('#clonedHeader').animate({ 
      'top': '0' 
     }, 300); 
    } else { 
     console.log('no'); 
     $('#clonedHeader').animate({ 
      'top': '-100px' 
     }, 300); 
    } 
}

http://jsfiddle.net/ndreckshage/ecUAc/

來源

2013-02-02 15:55:24 ndreckshage

hoverIntent在這裏沒有幫助，只需要調用動畫並使用當前設置的標誌進行一些調節。如果條件沒有改變基於國旗沒有需要調用動畫 – charlietfl

感謝所有這些建議，我只錯過了小提琴上的jquery庫，它在我的本地版本，這會教我趕！我有jquery克隆我的頭，因爲它會導致一個非常尷尬的跳躍，如果它使用相同的頭來修復頁面的頂部，我嘗試了許多不同的方式，但發現這個工作最簡單。這是關於控制檯日誌記錄的一些非常好的觀點，我一定會修改我的代碼來考慮這一點。非常感謝所有的建議，我絕對需要打磨我的js，大好時光 – jamie

當窗口滾動通過另一個元素時顯示一個新的元素

回答

相關問題