将 snap.js 应用到我的主要内容包装器似乎破坏了*一些*我的 jQuery 函数

Question

我正在使用 snap.js，它使您能够使用 css3 和 javascript 将主要内容 div 滑动到上方，从而在下方显示一个菜单。

我遇到的问题是，当我应用 snap-content 类时，它告诉 snap.js 哪个 div 滑动，作为我的主要站点包装器，依赖 jQuery 进行大小调整的元素表现出意外。

这是我的情况。

我正在使用 jQuery 使元素在滚动超过某个点时固定：

jQuery(document).ready(function ($) {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 140) {
            if ($("#mainMenu").css('position') !== 'fixed') {
                $("#mainMenu").css("position", "fixed");
            }
        } else {
            if ($("#mainMenu").css('position') !== 'static') {
                $("#mainMenu").css("position", "static");
            }
        }
    });
});

使用 snap.js 时，我不得不将 $(window).scroll 更改为 $('#wrapper').scroll，因为包装器现在是可滚动的内容。我相信这可能与我的问题有关。

当菜单固定后，我使用一些 jQuery 来保持它与固定之前的容器相同的宽度：

jQuery(function ($) {
    $(window).resize(_.debounce(function () {
        var elementWidth = $('#sidebarWrapper').width();
        $('#mainMenu').css('width', elementWidth + 'px');
    }, 10));
});

在我添加 snap-content 类之前，这一切都很好，我可以毫无问题地调整浏览器的大小。

添加类后，大小不再起作用。

还有其他与尺寸有关的函数也会开始意外地起作用，但这只是一个示例。

我认为它可能与我的 jQuery 冲突，但我使用的是 jQuery(function($)，所以应该停止这种情况吧？

snap.js

Answer 1

不要将事件添加到窗口滚动，而是将其添加到 snapcontent，因为您是在 snapcontent div 而不是窗口上滚动