Question

我尝试创建类似于http://kinkinurbanthai.com/的启动页面，但如果用户位于页面顶部，我需要重新激活启动画面，并进行额外向上滚动到＆＃ 39;请求＆＃39;或者再次激活飞溅。

我的代码工作到了重新激活splash元素的程度;但我无法等待额外的向上滚动＆＃39;请求。

到目前为止，这是有效的代码，减去锁定的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');
            }
        });

});

我试图阻止用户滚动，如果他们转到＆lt; = 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);
}

Answer 1

通过重新设计停止点部分来实现这一点 - 我也是在思考它。

更新了小提琴：http://jsfiddle.net/teejudp3/6/

    var $window = $(window);

    if ( $window.scrollTop() === 0 && $('.splashwrapper').hasClass('ready') ) {
        $window.scrollTop(1);
        $('.splashwrapper').removeClass('ready').removeClass('remove');
    }   

    if ( $window.scrollTop() === 0 && !$('.splashwrapper').hasClass('ready') ) {
        $window.scrollTop(1);
        setTimeout(function() {
            $('.splashwrapper').addClass('ready');
        }, 500);
    }

如果在页面顶部并且用户向上滚动，则将类添加到元素

1 个答案: