Druckbare Version
Hallo Leute,
ich hab eine Frage: Ich verwende folgendes jQuery. Dies tut was es tun soll. Ich hätte nur gerne eine kleinigkeit geändert.
Wenn ich anfange zu scrollen, wird der Header kleiner. Passt auch so.
Wenn ich jetzt aber nach oben scrolle, wird der Header erst wieder größer, wenn ich die Scroll Positino 0 erreicht habe. Ich möchte aber, dass der Header ab der Scroll Position 100 wieder größer wird nicht erst bei 0.
Kann mir hier jemand infos geben?
Du hast kein JavaScript gepostet. Außerdem benötigst du ja keine "Info" sondern sondern du möchtest, dass dir jemand sagt, wie du den JavaScript Code ändern musst ;)
Oh, sorry
ja, stimmt, ich bräuchte hier hilfe.
Ich hab auch schon bei ELSE ein IF eingebaut, hat aber auch nicht funktioniert.
Code:<script>
$(function(){
$('#header').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header').data('size') == 'big')
{
$('#header').data('size','small');
$('#header').stop().animate({
height:'110px'
},600);
$('.mod_onepage_navigation a, .navbar a').animate({paddingTop: '80px'},600);
$('.logo').animate({height: '60px', width: '236px', top: '20px'},600);
}
}
else
{
if($('#header').data('size') == 'small')
{
$('#header').data('size','big');
$('#header').stop().animate({
height:'250px'
},600);
$('.mod_onepage_navigation a, .navbar a').animate({paddingTop: '220px'},600);
$('.logo').animate({height: '140px', width: '551px', top: '50px'},600);
}
}
});
</script>
Nun, nach langem suchen bin ich jetzt so eigentlich gar nicht zufrieden mit dieser Lösung.
Eine schönere Lösung wäre, dass der header beim Scrollen auf eine gewisse Höhe mitscrollt. (Nach oben sowie auch nach unten).
Leider hab ich diesbezüglich noch nichts gefunden, was auch funktionieren könnte. Auch mit "position: sticky" hab ich bis dato noch nichts anfangen können.
Bei meinem obrigen Code wird der Header kleiner, wenn ich anfange zu scrollen, und erst dann wieder größer, wenn ich die Position 0 wieder erreicht habe.
Schöner wäre eben, dass der Header mitscrollt bis die höhe 110px erreicht wurde und wenn mann wieder nach oben scrollt, dass dieser dann auch mit dem scrollbalken höher wird.
Kann mir hier jemand diesbezüglich bitte helfen?
Schau Dir doch einfach mal die Demo von Rocksolid an. Zum Beispiel im TAO-Theme wir so etwas verwendet https://demo.rocksolidthemes.com/?th...ao&language=de
Ja, das hab ich mir auch schon angesehen, aber ich finde das dazupassende jQuery nicht bzw. weiß nicht, wie ich es für mich anpassen könnte.
Es gibt hier eine js-Datei "script" und dort ist ein Bereich mit // Fixed elements gekennzeichnet, welches für den Header auch verantwortlich ist. Ich kann aber leider hiermit nix anfangen.
Ich bin auch kein Javascript-Experte.
Wenn ich da etwas benötige gibt es für mich zwei Lösungen. Entweder ich bau mir ein Testcase und beiße mich durch den Code durch bis ich begriffen habe was da läuft oder wenn es mir zu kompliziert wird und/oder zulange dauert dann würde ich mir jemanden suchen, der mir das erledigt.
Nachtrag: In dem Code von Rocksolid ist natürlich noch eine ganze Menge mehr drin, aber aus meinem Bauchgefühl heraus sollten sich da genügend Anregungen finden um Dein Problem zu lösen. Du musst halt den Code an Deine Bedürfnisse anpassen (z.B. Klassen)
Nachtrag 2: Insgesamt sehe ich es aber ähnlich wie @Spooky hier. Du suchst jemanden der Dir den Code schreibt.
Schon mal bei Bootsrap rein geschaut? https://contao-bootstrap.de
In einigen Projekten setze ich folgenden Code ein. Vielleicht hilft er auch dir:
Code:<script>
jQuery(document).ready(function() {
jQuery(window).on("scroll", function() {
jQuery("body").toggleClass("scrolling", jQuery(document).scrollTop() > jQuery("#header").outerHeight())
})
});
</script>