javascript - 将 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 而不是窗口上滚动