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

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

1 个答案: