1
http://kinkinurbanthai.com/と同様のスプラッシュページを作成しようとしていますが、ユーザーがページの上部にいる場合はスプラッシュを再度アクティブにする必要があります追加のスクロールを「要求」するか、スプラッシュをもう一度アクティブにします。ページの上部にあり、ユーザーがスクロールすると、要素にクラスを追加します
私はスプラッシュ要素を再アクティブ化するまでのコードを作成しています。しかし、追加の「スクロールアップ」リクエストを待つことはできません。
これまでのコードでは、atmに必要な作業をしていないロッキングb/cを除いています。コード：http://jsfiddle.net/teejudp3/2/
// Does stuff on load and scrolls
//-------------------------------//
$(window).on("load scroll",function(e){
var $window = $(window);
if ($window.scrollTop() <= 0) {
$('.splashwrapper').removeClass('remove');
}
// hide/show splash screen
//=========================//
// chrome/FF
$('.splashwrapper').bind('DOMMouseScroll', function(e){
// get scroll direction
var direction = (function() {
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if(direction === 0) {
// scroll up
} else {
// scroll down
$('.splashwrapper').addClass('remove');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('.splashwrapper').bind('mousewheel', function(e){
// get scroll direction
var direction = (function() {
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if(direction === 0) {
// scroll up
} else {
// scroll down
$('.splashwrapper').addClass('remove');
}
//prevent page fom scrolling
return false;
});
// touch device - uses touchSwipe.js
$(".splashwrapper").swipe({
swipeUp:function() {
$('.splashwrapper').addClass('remove');
}
});
});
私は、彼らが< = 1スクロールトップの位置に行くが、これが影響したかった与えるとは思われない場合は、ユーザーがスクロールを停止しようとしました。
// temporarily lock users scroll position
var $window = $(window), previousScrollTop = 1, scrollLock = false;
$window.scroll(function(event) {
if(scrollLock) {
$window.scrollTop(previousScrollTop);
}
previousScrollTop = $window.scrollTop();
});
// if at 1px from top, stop scroll from going up one time
if ($window.scrollTop() <= 1) {
scrollLock = true;
$window.scrollTop(1, 0);
setTimeout(function() {
scrollLock = false;
}, 1000);
}