Wenn ein anderes div nach oben div ausblenden Scrollen

das ist, was ich bisher:Wenn ein anderes div nach oben div ausblenden Scrollen

$("#main").each(function() {this.scrollTop = this.scrollHeight; 

     if ($(this).scrollTop()>0) 
     { 
      $('#navigation').addClass("nav-hide"); 
     } 
     else 
     { 
      $('#navigation').addClass("nav-normal"); 
     } 
    });

Also im Grunde versuche ich, wenn Sie an die Spitze eines div es die Navigation verstecken scrollen, um herauszufinden, Bar. So könnte man das div ohne die Navigationsleiste darüber lesen. Irgendwelche Ideen? Vielen Dank.

Hier ist meine JSFiddle: https://jsfiddle.net/qb15p5g7/3/

Quelle

2016-03-25 Mechetle

Notiz Sie verwenden:?. $ ("# Main"), die jeweils (function() .. aber das wird immer nur Dies ist eine Instanz, da Sie eine ID zielen (vorausgesetzt, Sie haben nur ein einzelnes Element auf dieser Seite mit dieser ID). Sie sollten .each() nur für Elemente verwenden, die mehr als eine Instanz haben (z. B. $ (". pageSection ") .each (function() ...) und ich stimme @Maxwell Lasky in seinem Ansatz der Verwendung von .scroll() – gavgrif

Sie müssen sich verstecken jQuerys Fenster Scroll-Funktion und nicht jede Funktion verwenden, es sei denn, Sie werden mehr als einen Abschnitt haben, den Sie brauchen, um die Navigation zu verbergen, es gibt keinen Grund, sie zu verwenden, und ich gehe davon aus, dass Sie das nicht tun, weil Sie eine ID für #main verwenden und Ids eindeutig sein sollen . Sie müssen auch nicht mehr als eine Klasse hinzufügen. Sie können die Klasse einfach hinzufügen und die Klasse entfernen. Also, wenn im recht in der Annahme, dass Sie nicht mehr als einen Abschnitt haben, die Sie benötigen die nav in mehreren Instanzen auf Ihrer Seite zu verstecken und dann Ihren Code wie folgt aussehen sollte:

$(window).scroll(function() { 
    if ($(this).scrollTop() >= $('#main').offset().top) { 
    $('#navigation').addClass("nav-hide"); 
    }else { 
    $('#navigation').removeClass("nav-hide"); 
    } 
});

Und Sie werden nur hinzufügen die Klasse nav-hide und entferne sie dann beim Zurückscrollen.

Hier ist eine Geige dieser Arbeits JSFiddle Demo

Ich nehme an, das ist das, was Sie suchen, wenn Sie mich nicht wissen lassen, so dass ich meine Antwort bearbeiten können.

Quelle

2016-03-25 04:24:03

Die $(window).scroll() Methode auf Scroll Änderung des Fensters führt. Sie können es verwenden, um Ihre #navigation id-Selektor

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $('#navigation').fadeIn(); 
    } else { 
     $('#navigation').fadeOut(); 
    } 
});

JSFiddle here

Siehe die jQuery-Dokumentation .scroll() here

Quelle

2016-03-25 02:20:42 Maxwelll

Ich versuche, den Zahlenwert als' .h zu bekommen acht() 'des Fensterdokuments, so dass beim Scrollen der Abschnitt unter der Kopfzeile die Navigation ausblenden wird. Ich bin ziemlich neu bei jQuery Entschuldigung. – Mechetle

der JSFiddle, den ich oben eingefügt habe, tut genau das, was Sie gerade gesagt haben ... – Maxwelll

function scrollpos() { 
 
    if (window.scrollY<document.getElementById('header').clientHeight) { 
 
    document.getElementById('navigation').style.display = 'block'; 
 
} else { 
 
    document.getElementById('navigation').style.display = 'none'; 
 
} 
 
}

#navigation { 
 
     width: 100%; 
 
     height: 50px; 
 
     background-color: #586e75; 
 
     position: fixed; 
 
     z-index: 1000; 
 
     transition: transform 200ms ease; 
 
    } 
 
    
 
    header, 
 
    section { 
 
     height: 100vh; 
 
     width: 100%; 
 
     position: static; 
 
    } 
 
    
 
    header { 
 
     background: #4f4244; 
 
    } 
 
    
 
    section { 
 
     background: #222222; 
 
    } 
 
    
 
    .nav-normal { 
 
     transform: translateY(0%); 
 
    } 
 
    
 
    .nav-hide { 
 
     transform: translateY(-100%); 
 
    }

<body onscroll="scrollpos()"> 
 
     <div id="navigation"></div> 
 
     <header id="header"></header> 
 
     <section id="main"></section> 
 
</body>

do u so etwas wie dieses brauchen @Steboney

Quelle

2016-03-25 10:58:32 Batman

Nein, das ist nicht das, wonach ich suche. – Mechetle

Möchten Sie die Navigationsleiste ausblenden, wenn die Bildlaufleiste unter der Kopfzeile angezeigt wird? – Batman

Ich habe die Geige bearbeitet, bitte überprüfe sie und lass es mich wissen. – Batman

Wenn ein anderes div nach oben div ausblenden Scrollen

Antwort

Verwandte Themen