Question

我有一个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');
                });
            }
        });

});

但是我也想在点击带有特殊类/名称的链接/按钮时更改div类。

我做了一个不好的尝试..但是我怎么能在前一个函数中加入它？用“if else”..

$(".closemeny").click(function() {
    menu.fadeOut('slow', function(){
        $('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
});

Answer 1

我不完全理解，但我会采取行动：

只需将.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');
        });
    });
});

Answer 2

你能做的就是创造一个方便的功能，你可以传递来保持干燥。我不认为你会把这些事件结合起来受益;即使他们做同样的事情，他们也是不同的。

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

使用jquery更改div上的类

2 个答案: