當滾動到達錨點時JQuery做X，調整大小時準確

我有一個帶有徽標和漢堡包圖標的導航欄，當滾動到達某個錨點時，該導航欄應該改變顏色（淡入淡出某個版本並淡出另一個版本）。它起初運行良好，但當我調整頁面大小時，它會停止準確。當滾動到達錨點時JQuery做X，調整大小時準確

var targetOffset = $("#third-home-section").offset().top; 

var $w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
     navWhite.fadeIn(100); 
     navBlack.fadeOut(100); 
     hamburgerWhite.fadeIn(100); 
     hamburgerBlack.fadeOut(100); 

    } else { 

     navWhite.fadeOut(100); 
     navBlack.fadeIn(100); 
     hamburgerWhite.fadeOut(100); 
     hamburgerBlack.fadeIn(100); 
    } 
});

這個問題有什麼已知的解決方案，我可以在這種情況下使用？

來源

2017-04-17 Sergi

將它與resize（）結合起來？ - $（window）.resize（function（）{...}）; – steffanjj

包裝我目前的功能？不起作用。 – Sergi

寫在一個快速響應的環境一個jQuery功能最簡單的方法是保存實際的功能，並調用它在$(window).resize()

看到，因爲你已經在運行一個滾動功能，您可以保存if聲明（包括你的變量）在$(window).scroll()上運行的函數中，然後添加一個代碼片段在$(window).resize()上運行相同的函數。

見下面的例子：

$(window).scroll(function(){ 
    my_responsive_function(); 
}); 

$(window).resize(function(){ 
    my_responsive_function(); 
}); 

function my_responsive_function() { 
    var targetOffset = $("#third-home-section").offset().top; 
    if ($w.scrollTop() > targetOffset) { 
     navWhite.fadeIn(100); 
     navBlack.fadeOut(100); 
     hamburgerWhite.fadeIn(100); 
     hamburgerBlack.fadeOut(100); 
    } else { 
     navWhite.fadeOut(100); 
     navBlack.fadeIn(100); 
     hamburgerWhite.fadeOut(100); 
     hamburgerBlack.fadeIn(100); 
    } 
}

編輯

由於出了什麼問題與您的代碼進一步的解釋，你設定的變量targetOffset一次，應該每次設置的功能需求跑步。

本質上發生的是$("#third-home-section").offset().top在不同的屏幕尺寸上有不同的值，但如果它設置了一次，即使在屏幕尺寸改變後，它也會保持其值。在函數內部添加它會強制它重新檢查相關元素的偏移量。

來源

2017-04-17 15:01:04 Frits

這使得在我的頁面上滾動真的很慢。 – Sergi

的微小變化和高爾夫球對@弗裏茨的回答有點（這主要是正確的）

// bind the listener to both events with 'on' 
$(window).on('scroll resize', my_responsive_function); 

function my_responsive_function() { 
    var targetOffset = $("#third-home-section").offset().top; 
    if ($(this).scrollTop() > targetOffset) { // $w was undefined 
     navWhite.fadeIn(100); 
     navBlack.fadeOut(100); 
     hamburgerWhite.fadeIn(100); 
     hamburgerBlack.fadeOut(100); 
    } else { 
     navWhite.fadeOut(100); 
     navBlack.fadeIn(100); 
     hamburgerWhite.fadeOut(100); 
     hamburgerBlack.fadeIn(100); 
    } 
}

編輯：你提到的'低迷的表現，考慮debouncing的my_responsive_functionhttp://benalman.com/projects/jquery-throttle-debounce-plugin/

執行

// include this jQuery plugin: 
// http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js 

// if 'scroll' or 'resize' are triggered more than once per 250ms, 
// only the last trigger will actually execute 
$(window).on('scroll resize', $.debounce(250, false, my_responsive_function));

來源

2017-04-17 15:14:19 SteamDev

當滾動到達錨點時JQuery做X，調整大小時準確

回答

相關問題