检测滚动事件，同时已经在顶部答案

【问题标题】：Detect Scroll event while already on top检测滚动事件，同时已经在顶部
【发布时间】：2012-10-17 17:16:51
【问题描述】：

我的页面顶部有一个菜单栏，如果我已经在顶部向上滚动，我想显示该菜单栏。想象一下你向上滚动，当你在那里时，你再次向上滚动，栏就会显示出来。

我有这段代码使用 jquery

// listen for the scroll to show the top menu
var was_on_top = false;
$(function () {
    $(window).bind("scroll", function (e) {

        if ($(window).scrollTop() == 0) {
            if ($('.menu').css('display') == "none" && was_on_top) {
                $('.menu').slideDown();
            } else {
                was_on_top = true;
            }
        } else {
            was_on_top = false;
        }
    });
});

但是滚动事件在顶部时不会触发。有什么想法吗？

编辑：这里是工作代码。在 FF、Chrome 和 IE9 上测试

// listen for the scroll to show the top menu
var was_on_top = false;
$(function () {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', onMouseWheelSpin, false); // FireFox
        window.addEventListener('mousewheel', onMouseWheelSpin, false); // Chrome
    } else {
        window.onmousewheel = onMouseWheelSpin;
    }
});

function onMouseWheelSpin(event) {

    if (!event) // IE sucks
        event = window.event;

    if ($(window).scrollTop() == 0 &&
          (
            event.detail < 0 // Firefox
            ||
            (event.wheelDelta && (
                                    (window.opera && event.wheelDelta < 0) // Opera
                                    ||
                                    event.wheelDelta > 0 // IE
                                 )
            )
          )
        ) {
        if ($('.menu').css('display') == "none" && was_on_top) {
            $('.menu').slideDown();
        } else {
            was_on_top = true;
        }
    } else {
        was_on_top = false;
    }
}

【问题讨论】：

标签： javascript scroll jquery scrolltop

【解决方案1】：

滚动事件不会触发，因为窗口不再滚动。

您可能需要为鼠标滚轮本身创建一个自定义事件。

这可能会有所帮助：Javascript: Capture mouse wheel event and do not scroll the page?

【讨论】：