如何在特定事件后停止window.scroll()？

Question

我想在扩展时使粘性导航行为类似(当菜单扩展时滚动关闭)到此网站的导航(http://amandagerhardsen.com/#cloudbusting/4).

我该怎么做？

 var Boxlayout = (function () {
        var $el = $('#sticky-nav'),
            $sections = $el.children('section'),
            // work panels
            $workPanelsContainer = $('#bl-panel-work-items'),
            // close work panel trigger
            $closeWorkItem = $workPanelsContainer.find('nav > span.hidemenu'),
            transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
            },
            // transition end event name
            transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
            // support css transitions
            supportTransitions = Modernizr.csstransitions;

        function init() {
            initEvents();
        }

        function initEvents() {
            $sections.each(function () {
                var $section = $(this);
                // expand the clicked section and scale down the others
                $section.on('click', function () {
                    if (!$section.data('open')) {
                        $section.data('open', true).addClass('bl-expand bl-expand-top');
                        $el.addClass('bl-expand-item');
                    }
                }).find('span.hidemenu').on('click', function () {
                    // close the expanded section and scale up the others
                    $section.data('open', false).removeClass('bl-expand').on(transEndEventName, function (event) {
                        if (!$(event.target).is('section')) return false;
                        $(this).off(transEndEventName).removeClass('bl-expand-top');
                    });
                    if (!supportTransitions) {
                        $section.removeClass('bl-expand-top');
                    }
                    $el.removeClass('bl-expand-item');
                    return false;
                });
            });
            // clicking on a work item: the current section scales down and the respective work panel slides up
            $workItems.on('click', function (event) {
                // scale down main section
                $sectionWork.addClass('bl-scale-down');
                // show panel for this work item
                $workPanelsContainer.addClass('bl-panel-items-show');
                var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
                currentWorkPanel = $panel.index();
                $panel.addClass('bl-show-work');
                return false;
            });
            // navigating the work items: current work panel scales down and the next work panel slides up
            $nextWorkItem.on('click', function (event) {
                if (isAnimating) {
                    return false;
                }
                isAnimating = true;
                var $currentPanel = $workPanels.eq(currentWorkPanel);
                currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
                var $nextPanel = $workPanels.eq(currentWorkPanel);
                $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function (event) {
                    if (!$(event.target).is('div')) return false;
                    $(this).off(transEndEventName).removeClass('bl-hide-current-work');
                    isAnimating = false;
                });
                if (!supportTransitions) {
                    $currentPanel.removeClass('bl-hide-current-work');
                    isAnimating = false;
                }
                $nextPanel.addClass('bl-show-work');
                return false;
            });
            // clicking the work panels close button: the current work panel slides down and the section scales up again
            $closeWorkItem.on('click', function (event) {
                // scale up main section
                $sectionWork.removeClass('bl-scale-down');
                $workPanelsContainer.removeClass('bl-panel-items-show');
                $workPanels.eq(currentWorkPanel).removeClass('bl-show-work');
                return false;
            });
        }
        return {
            init: init
        };
    })();

Answer 1

这是一个小提琴:http://jsfiddle.net/77P2e/

完成后要小心再次解锁滚动,否则这对用户来说可能非常烦人!

设置代码

var $window = $(window), previousScrollTop = 0, scrollLock = false;

$window.scroll(function(event) {     
    if(scrollLock) {
        $window.scrollTop(previousScrollTop); 
    }

    previousScrollTop = $window.scrollTop();

});

锁定滚动位置:

scrollLock = true;

并再次解锁......

scrollLock = false;

作为示例用途,您可以在鼠标进入导航区域时锁定窗口滚动位置,并在鼠标离开时再次解锁:

$("nav")
    .mouseenter(function(){ scrollLock = true; })
    .mouseleave(function(){ scrollLock = false; });

Answer 2

在我看来，接受的答案不是应该实现的，因为window.scroll()即使“事件”已经发生，该功能仍将（无休止地）运行。

该window.scroll()函数是一个事件处理程序。所以使用on()绑定事件和off()解除绑定（在“事件”发生后）。

$(window).on('scroll', function() { // bind event handler
    var offset = $(window).scrollTop();
    console.log("page Y-Offset: ", offset); // just to see it working
    if(offset >= 100) $(window).off('scroll'); // unbind the event handler when the condition is met

});