jQuery append nur einmal

Also ich habe diese:

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

});

Beim scrollen bin ich versucht zu machen, die navigation zu fixen, das funktioniert, aber ich möchte auch hinzufügen einer tag-mit dem logo-Bild in der #nav div, was auch funktioniert, aber es hängt auf jedem scrollen und so beim scrollen bekomme ich Lust 100 Bilder von dem logo.

Wie kann ich es Anhängen nur einmal und wenn es nicht gescrollt mehr als 136px entfernt werden?

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

InformationsquelleAutor vjordanov | 2014-06-13

  1. 6

    einfach ein boolean, 

    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

    Die alternative ist zu prüfen, mit $('#lilLogoID').is(':visible'), allerdings würde dies dann führen Sie eine Suche für img und überprüfen Sie sichtbar auf jeder Veranstaltung (das wäre langsam)

    Danke! Funktioniert einwandfrei!

    InformationsquelleAutor AbstractChaos

  2. 1
    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);

    }
});
});
    verwenden Sie diesen code !!!

    InformationsquelleAutor KarthikManoharan

  3. 0

    Hinzufügen einer Klasse sagen scroll zu #nav. Dann innerhalb $(window).scroll(function () { überprüfen, ob #nav .hasClass() die Klasse scroll, wenn es die den rest erledigen, oder sonst dont..am Ende if entfernen Sie die Klasse .removeClass()

    InformationsquelleAutor silk_route11

Schreibe einen Kommentar