jQuery ajouter qu'une seule fois

J'ai donc ceci: 

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

});

Lors du défilement, je suis en train de faire de la navigation à être fixé, ce qui fonctionne, mais je veux aussi ajouter une étiquette avec le logo de l'image dans le #nav div, qui fonctionne aussi mais il ajoute sur chaque rouleau ainsi, lorsque le défilement-je obtenir 100 images du logo.

Comment puis-je faire pour ajouter une seule fois et quand il n'est pas défiler plus de 136px à supprimer?

  • Au lieu de var logo = '<img src="img/logo.png" />';, utilisez var logo = $('<img src="img/logo.png" />');
InformationsquelleAutor vjordanov | 2014-06-13
  1. 6

    il suffit d'utiliser un booléen, 

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

    violon

    L'alternative est de vérifier avec $('#lilLogoID').is(':visible'), mais ce serait alors faire une recherche pour les img et vérifier visible sur chaque événement (ce qui serait lent)

    • Merci! Fonctionne impeccable!
    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);

    }
});
});
    • utilisez ce code !!!
    InformationsquelleAutor KarthikManoharan
  3. 0

    Ajouter une classe de dire scroll à #nav. Puis à l'intérieur de $(window).scroll(function () { vérifier si #nav .hasClass() la classe scroll, si il a le faire le reste ou bien ne pas..à la fin de if de supprimer la classe par .removeClass()

    InformationsquelleAutor silk_route11