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

});

Answer 3

在移动设备上，Javascript解决方案对我来说有点笨拙。这就像它滚动一点然后快速回到原位。

然而，我想出了一种更干净利落的方法，只需在你不想滚动的部分改变CSS的overflow属性就可以了。这是d3中的代码，但概念应该非常明确：

var body = d3.select('body');

var preventScroll = function () {
        body.style('overflow', 'hidden');
    },
    allowScroll = function () {
        body.style('overflow', 'scroll');
    };

d3.select('#sticky-nav')
  .on('touchmove', preventScroll)
  .on('touchstart', preventScroll)
  .on('touchend', allowScroll)
  .on('touchcancel', allowScroll);

Answer 4

当我使用jquery动画时，

if ($(window).scrollTop() >= $('.btn').offset().top + $('.btn').outerHeight() - window.innerHeight) { $(".tab").stop(); }

我做到了，而且奏效了。

.btn是按钮。如果.tab div滚动到该位置，它将停止。

Answer 5

如果你正在使用jquery动画，你可以尝试在动画对象上使用stop()函数。

如何在特定事件后停止window.scroll（）？

5 个答案: