使用jquery更改div上的类

我有一个div，它根据用户在使用jquery的页面上的位置来更改类。此函数如下所示

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('slow', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('slow');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('slow', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('slow');
                });
            }
        });

});

---

我不完全明白，但我要试一试：

只需将.click函数分开，或将其移到if/else{}中即可

$(function(){       
    var menu = $('#menu'),
        pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('slow');
            });

            //you can paste it here

        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('slow');
            });

            //or you can paste it here
        }
    });

    //or you can leave it here to apply to all cases
    $(".closemeny").click(function() {
        menu.fadeOut('slow', function(){
            $('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
        });
    });
});

---

我不完全明白，但我要试一试：

只需将.click函数分开，或将其移到if/else{}中即可

$(function(){       
    var menu = $('#menu'),
        pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('slow');
            });

            //you can paste it here

        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('slow', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('slow');
            });

            //or you can paste it here
        }
    });

    //or you can leave it here to apply to all cases
    $(".closemeny").click(function() {
        menu.fadeOut('slow', function(){
            $('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
        });
    });
});

---

你所能做的就是创建一个方便的函数，你可以通过它来保持东西干燥。我认为把这些活动结合起来对你没有好处；即使他们做同样的事情，他们还是不同的

var changeClass = function (c1, c2) {
    menu.fadeOut('slow', function () {
        $(this).removeClass(c1).addClass(c2).fadeIn('slow');
    });
};

$(window).scroll(function () {
    if ($(this).scrollTop() > pos.top + menu.height()) {
        changeClass('default', 'fixed');
    } else if ($(this).scrollTop() <= pos.top) {
        changeClass('fixed', 'default');
    }
});

$(".closemeny").click(function() {
    changeClass('fixed', 'default');
});

---

你所能做的就是创建一个方便的函数，你可以通过它来保持东西干燥。我认为把这些活动结合起来对你没有好处；即使他们做同样的事情，他们还是不同的

var changeClass = function (c1, c2) {
    menu.fadeOut('slow', function () {
        $(this).removeClass(c1).addClass(c2).fadeIn('slow');
    });
};

$(window).scroll(function () {
    if ($(this).scrollTop() > pos.top + menu.height()) {
        changeClass('default', 'fixed');
    } else if ($(this).scrollTop() <= pos.top) {
        changeClass('fixed', 'default');
    }
});

$(".closemeny").click(function() {
    changeClass('fixed', 'default');
});

---

这真的很好用！但当我再次滚动时，图层会返回。。有没有办法在有人点击关闭按钮后禁用图层？在重新加载页面之前不会返回..我只是添加了这个来删除div.$.closemenu.clickfunction{menu.fadeOut'slow'，函数{$'menu'.remove；效果非常好！但是当我再次滚动时，图层会返回..有没有办法在有人单击closemeny后禁用图层？在重新加载页面之前不会返回..我只是添加了这个来删除div.$.closemenu.clickfunction{menu.fadeOut'slow'，函数{$'menu'。删除；