我正在使用此代码片段使元素淡出 if 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);
最佳答案
您的第二个代码段工作正常,您只是使用了fadein和fadeout而不是fadeIn和fadeOut>,一个常见的错误!
这段代码对我来说工作得很好: 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
(如果根本不需要,也可以从第一个语句中删除)。
关于javascript - 仅当我向下滚动时淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30329186/