jQuery 仅 append 一次

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 中添加带有 Logo 图像的标签，这也有效，但它会 append 在每个滚动上，因此在滚动时我收到了大约 100 张 Logo 图像。

如何使其仅 append 一次，并且当滚动不超过 136px 时将其删除？

Answer 1

只需使用 bool 值，

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 并检查每个事件的可见性(这将慢一点)