Question

所以我有这个：

jQuery("document").ready(function($){

var nav = $('#nav');
var logo = '<img src="img/logo.png" />';

$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("nav-f");
        nav.append(logo);
    } else {
        nav.removeClass("nav-f");
        nav.remove(logo);
    }
});

});

滚动时我正在尝试修复导航，这有效，但我还想在#nav div中添加带有徽标图像的标签，这也适用但是它会附加在每个滚动上，所以在滚动时我得到100个徽标图像。

如何才能使其仅追加一次且滚动次数超过136px时才能删除？

Answer 1

只需使用布尔值，

jQuery("document").ready(function($){

    var nav = $('#nav');
    var logo = '<img id="lilLogo" src="img/logo.png" />';
    var visible = false;

    $(window).scroll(function () {
            if ($(this).scrollTop() > 136) {
                nav.addClass("nav-f");
                if(!visible) {
                    nav.append(logo);
                    visible = true;
                }
            } else {
                nav.removeClass("nav-f");
                if(visible)  {
                    $('#lilLogo').remove();
                    visible = false;
                }
            }
        });
    });

fiddle

另一种方法是检查$('#lilLogoID').is(':visible')，然后这会搜索img并检查每个事件的可见性（这会很慢）

Answer 2

jQuery("document").ready(function($){

var nav = $('#nav');
var logo = '<img id="lilLogo" src="img/logo.png" />';    
$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("nav-f");  
        if (!$(".nav-f").find('#lilLogo').length) {
        nav.append(logo);
        }
    } else {

        nav.removeClass("nav-f");
            nav.remove(logo);

    }
});
});

Answer 3

向scroll添加一个说#nav的课程。然后在$(window).scroll(function () {内查看#nav .hasClass()是否为scroll类，如果有剩余的话，或者不要...... if删除.removeClass()

的课程

jQuery只附加一次

3 个答案: