tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/62841-verwendung-main-navigation-beim-hochscrollen-einblendenRockSolid Themes: Discussion 2020-12-09T08:03:17Ztag:help.rocksolidthemes.com,2012-07-23:Comment/488805962020-12-07T08:55:54Z2020-12-07T08:55:54ZVerwendung: Main Navigation beim hochscrollen einblenden<div><p>Vielen Dank für Ihre Frage.</p>
<p>Eine solche Funktion ist im Tao-Theme selbst nicht vorgesehen.</p>
<p>Sie können dafür z. B. folgenden JavaScript-Code einsetzen:</p>
<pre>
<code>jQuery(window).on('scroll resize load', function() {
if ((window.pageYOffset || document.documentElement.scrollTop || 0) > 1000) {
jQuery('.page-header').css('display', 'none');
}
else {
jQuery('.page-header').css('display', '');
}
});</code>
</pre>
<p>Verändern Sie dabei den Wert <code>1000</code> auf die gewünschte Scrolltiefe.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/488805962020-12-07T15:13:07Z2020-12-07T15:53:30ZVerwendung: Main Navigation beim hochscrollen einblenden<div><p>Vielen Dank!</p>
<p>Nun ist es so dass die Hauptnavigation erst wieder der eingestellten Scrolltiefe auftaucht und nicht direkt beim wechsel der Scrollrichtung.<br>
Ich habe ein Beispiel gefunden dass ich gerne verwenden würde nur leider weiß ich nicht wie der CSS-Code dann aussehen muss.<br>
<a href="https://blog.kulturbanause.de/2017/05/navigation-runterscrollen-verstecken-hochscrollen-anzeigen/">https://blog.kulturbanause.de/2017/05/navigation-runterscrollen-ver...</a></p>
<p>Edit: habe das verlinkte Beispiel nun damit hinbekommen:</p>
<pre>
<code>.header-navigation {
transition: transform .25s .1s ease-in-out;
}
.down .header-navigation {
transform: translate3d(0, -100px, 0);
}</code>
</pre>
<p>nun weiß ich aber nicht wie ich das jetzt erst ab einer gewissen Scrolltiefe aktiviere</p>
<p>Edit 2:<br>
Learning by doing...<br>
jetzt funktioniert es.</p>
<pre>
<code> var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 1000) {
$('body').removeClass('down');
};
});</code>
</pre>
<p>Vielen Dank für all die Hilfe!</p></div>miketag:help.rocksolidthemes.com,2012-07-23:Comment/488805962020-12-07T16:20:56Z2020-12-07T16:20:56ZVerwendung: Main Navigation beim hochscrollen einblenden<div><p>Wenn Sie den JavaScript-Code aus dem verlinkten Beispiel verwenden, können Sie dafür folgenden CSS-Code einsetzen:</p>
<pre>
<code>.page-header {
transition: transform .25s .1s ease-in-out;
}
body.down .page-header {
transform: translateY(-100%);
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/488805962020-12-07T16:38:50Z2020-12-07T16:38:50ZVerwendung: Main Navigation beim hochscrollen einblenden<div><p>Danke!</p>
<p>Bei dem CSS-Code meldet der Quelltexteditor:<br>
Element (body.down) is overqualified. Just use .down without element name.</p></div>mike