Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions

别说谁变了你拦得住时间么 提交于 2019-12-13 01:19:59

问题


I'm using snap.js which enables you to slide your main content div over using css3 and javascript, revealing a menu underneath.

The problem I am having is that when I apply the class snap-content, which tells snap.js which div to slide, that being my main site wrapper, the elements relying on jQuery for their sizing behave unexpectedly.

Here's my situation.

I'm using jQuery to make an element fixed when scrolling past a certain point:

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");
            }
        }
    });
});

When using snap.js I had to change $(window).scroll to $('#wrapper').scroll because the wrapper is now the scrollable content. I believe this could have something to do with my problem.

When the menu becomes fixed I use some jQuery to keep it the same width as the container it was inside before it became fixed:

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

This all works fine before I add the class snap-content, and I can resize the browser without any problems.

When the class is added the sizing no longer works.

There are other functions to do with sizing that start to act unexpectedly too but this is just an example.

I assumed it might be something clashing with my jQuery but I'm using jQuery(function($) so that should stop that right?

snap.js


回答1:


instead of adding the event to the window scroll add it to the snapcontent since you are scrolling on the snapcontent div instead of the window



来源:https://stackoverflow.com/questions/20792655/applying-snap-js-to-my-main-content-wrapper-seems-to-break-some-of-my-jquery-f

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!