Search code examples
javascriptjqueryscrollfullscreen

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


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
        };
    })();

Solution

  • 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; });