jquery - 窗口宽度变化时如何添加/删除事件监听器

Question

有什么方法可以添加/删除在窗口宽度变化时为导航栏创建动画的事件监听器？

在小屏幕时(例如宽度<768)→如果有事件监听器，将其移除并将导航栏固定在顶部。滚动时无动画显示。

大屏时→添加事件监听滚动时显示动画

<div id="page-header">
<nav class="navbar"> </nav>
</div>

<script>
    var flag = true;
    $(window).on('scroll', function() {
        if ( $(window).scrollTop() > 54 && flag ==true ) {
            console.log('Event Fired');
            $('#page-header nav').css({
                'position': 'fixed',
                'top': '-54px',
                'width': '100%',
                'z-index': '1000'
            })
            .animate({
                top: '+=54px'
            }, 500);
            flag = false;
        } else if ( $(window).scrollTop() === 0 ) {
            $('#page-header nav').css({
                'position': 'relative'
            });
            flag = true;
        }
    });

</script>

Answer 1

您可以为此使用 JQuery off() 方法。而不是将您的处理程序内联放置在一个单独的函数中...

function eventHandler(e) {
   /* ... do something ... */
}

...然后像这样附加和删除监听器...

/* attach */
$('selector').on('event', eventHandler);

/* remove */
$('selector').off('event', eventHandler);

只要选择器、事件和处理程序在“关闭”和“打开”中完全匹配，该行为就会被删除。

More info @ JQuery .

希望对您有所帮助。 :)