2015-05-19 52 views
1

如果scrolltop> 750並且當它爲< 750時我正在使用此代碼片段使淡出元素淡出。它工作正常,但我希望當它仍然不可見時滾動備份(淡出後),直到用戶到達頁面頂部。只有當我向下滾動時纔會淡出

所以,這是什麼目前發生的事情: 元素默認爲可見,用戶滾動750和它淡出。用戶到達頁面的結束,滾動備份和達到750當元素淡出早在

var $window = $(window); 
var $freccia = $('#freccia1'); 

function showHideFreccia() { 
    var availableScroll = $(document).height() - $window.height(), 
     scrollTop = $window.scrollTop(); 

    if(scrollTop < 750 || scrollTop == availableScroll) { 
     $freccia.fadeIn("slow", function() { 
     }); 
    } else { 
     $freccia.fadeOut("slow", function() { 
     }); 
    } 
} 

showHideFreccia(); 
$window.scroll(showHideFreccia); 

應該怎樣改變的是: 元素默認爲可見,用戶滾動750和它淡出。用戶到達頁面的結束,滾動備份當到達頁面元素變淡回頂

我試圖用這個,但它不工作(不淡入/淡出了):

var $window = $(window); 
var $freccia = $('#freccia1'); 

function showHideFreccia() { 
    var availableScroll = $(document).height() - $window.height(), 
     scrollTop = $window.scrollTop(); 

    if (scrollTop > 750 || scrollTop == availableScroll) { 
     $freccia.fadeout("slow", function() { 
     }); 
    } 
    if (scrollTop < 1 || scrollTop == availableScroll) { 
     $freccia.fadein("slow", function() { 
     }); 
    } 
} 

showHideFreccia(); 
$window.scroll(showHideFreccia); 
+1

是你確切的代碼?因爲你在淡入淡出時缺少大寫字母。應該是fadeIn和fadeOut –

+0

是的,這是我的實際代碼...我沒有得到警告或錯誤.. – MultiformeIngegno

+0

哦,好吧,理解。現在我想改變它 – MultiformeIngegno

回答

0

你的第二個代碼片段正常工作,您只需要使用淡入淡出代替淡入淡出,一個常見的錯誤!

此代碼爲我工作的罰款: JSFiddle

var $window = $(window); 
var $freccia = $('#freccia1'); 

function showHideFreccia() { 
    var availableScroll = $(document).height() - $window.height(), 
     scrollTop = $window.scrollTop(); 

    if (scrollTop > 750 || scrollTop == availableScroll) { 
     $freccia.fadeOut("slow", function() { 
     }); 
    } 
    if (scrollTop < 1 || scrollTop == availableScroll) { 
     $freccia.fadeIn("slow", function() { 
     }); 
    } 
} 

showHideFreccia(); 
$window.scroll(showHideFreccia); 

編輯:

不能確定這是否是你想要的發生與否,而是這個當前的代碼將再次顯示元素當你到達頁面的末尾時。你可以通過從第二個if語句中刪除|| scrollTop == availableScroll來解決這個問題(如果根本不需要它,它也可以從第一個中刪除)。

0

你可以使用這個腳本,在你的滾動頂部申請:

var detectScroll = function (_event) { 
    var event = window.event || _event; // old IE support 
    var direction = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); 
    return direction; 
    }; 

function showHideFreccia(e) { 
    var dir = detectScroll(e); 
    //... 
    if (dir == 1 || scrollTop == availableScroll) { 
     // your action 
    } 
} 
// and into your scroll event 
$window.scroll(function(e) { 
    showHideFreccia(e); 
}); 

Source

如果將retur ñ1這意味着,你向上滾動,然後執行你的fadein行動。 -1我指滾動到底

+0

我應該把這個放在哪裏? – MultiformeIngegno

+0

我更新了我的安裝程序 –

相關問題