How to stop window.scroll() after specific event?

Question

I want to make the sticky-nav to act similar(scroll is off when the menu is expanded) to this website's nav(http://amandagerhardsen.com/#cloudbusting/4) when expanded.

How do I do it?

 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

Here is a fiddle: http://jsfiddle.net/77P2e/

Be careful to unlock scrolling again when done, or this could be very annoying for the user!

Setup code

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

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

    previousScrollTop = $window.scrollTop();

});

To lock scroll position:

scrollLock = true;

And to unlock again...

scrollLock = false;

As an example use, you could lock the window scroll position when the mouse enters the navigation area, and unlock it again when the mouse leaves:

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

Answer 2

In my opinion the accepted answer is not what should be achieved, as the window.scroll() function will be still running (endlessly), even if the 'event' has occured.

The window.scroll() function is an event handler. So use on() to bind the event and off() to unbind it (after the 'event' has occured).

$(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

});