Erledigt - Headergrafik bis zu einer bestimmten Position mitscrollen lassen

[MJayFux]

Hallo.
Ich möchte eine Headergrafik, welche zwischen 2 Navigationen positioniert ist, bis zu einem bestimmten Punkt mitscrollen lassen. Ich habe im Netz einige Codeschnippsel gefunden, aber keine funktioniert so richtig. Ich habe die Headergrafik als Background eines leeren Divs deklariert und dem Div 100% Breite und die Höhe der Grafik zugewiesen, aber dann verließen sie ihn ...

Gewollt ist der Effekt folgender Site: http://afcg.chayns.net/aboutus

Da ich mich nicht sonderlich gut mit JavaScript und jQuery auskenne hoffe ich auf Hilfe aus der PSD-Tutorials-Community.

 

[Myhar]

Was willst du genau? Auf der Seite wird ein parallax Effekt verwendet. Oder möchtest du, dass ein Element bis zu einer bestimmen Position mitscrolled? das wäre dann so etwas: (browser schmal machen, damit man auch genug zum Scrollen hat)

 

[MJayFux]

Ich habe eine obere Menüleiste, eine Headergrafik, und dann noch eine Menüleiste. Die Headergrafik zwischen den Menüs soll beim runterscrollen bis an eine bestimmte Position mitscrollen und dann stehen bleiben ungeachtet der Menüleisten.

 

[Myhar]

Also das, was ich dir verlinkt habe?

 

[MJayFux]

So ungefähr ... nur sollte dann eben die Grafik stehen bleiben und nicht dass dann noch was drunter (als weiterer Scolleffekt) folgt.

Es geht um folgendes: Ich habe eben jene Grafik und im unteren Teil davon befindet sich ein Text, der eben immer sichtbar sein soll. Der obere Teil der Grafik soll dann unter der oberen Menüleiste "verschwinden". Das Ganze, also der Code wird in die header.php von meinem Child-Theme bei einer Wordpress-Installation reingeschrieben. jQuery ist schon als script-source im Head-Bereich implementiert.

Danke für die Hilfe

 

[dn3d_fanboy]

Da position: sticky nicht von allen Browsern unterstützt wird, kann dir diese Lösung per jQuery vielleicht helfen:
http://jsfiddle.net/sinky/S8Fnq/

Beim JS Code musst du dann in Zeile 2 den Weg (in Pixel), der heruntergescrollt (im Beispiel 0) werden muss ändern.

Der Header ist im Beispiel schon vo vornherein position: fixed. Das kannst du auch ändern. Da dem Header eine Klasse hinzugefügt wird, kannst du anhand dieser Klasse alles weitere per CSS bearbeiten.

 

[dn3d_fanboy]

Hier wäre auch noch ein Beispiel:

 

[MJayFux]

Danke, ich probiere es gleich aus und gebe Rückmeldung.

 

[MJayFux]

Hmm ... also das erste funktioniert nicht, obwohl ich den Code bis auf position:fixed übernommen, und bei .tiny die Background-Definition rausgenommen habe. Dem header-div habe ich die ID und Klasse "header-picture" verpasst, und den angepassten JS-Code habe ich in den Footer von WP geschrieben ... aber das Bild bleibt unbeeindruckt in voller Größe stehen.

Hier die CSS von der Headergrafik und von der tiny-Klasse:

.header-picture {
background: url("../headerpicture.jpg") top center no-repeat;
background-size: auto;
position: relative;
width: 100%;
height: 364px;
margin: 0;
padding: 0;
text-align: center;
transition: height 500ms;
}

.header-picture.tiny {
height: 100px;
}

 

[dn3d_fanboy]

Bei .header-picture.tiny musst du position:fixed natürlich wieder mir reinnehmen, sonst wird der Header zwar geändert, aber du siehst es dementsprechend nicht, weil er oben bleibt.

Ansonsten lade deinen Code mal bei JSfiddle hoch, dann kann man genauer nachschauen.

 

[MJayFux]

ich habe bei JSfiddle keinen Account ...
auch wenn ich bei .tiny position:fixed reinschreibe, ändert sich nix ...

 

[dn3d_fanboy]

ich habe bei JSfiddle keinen Account ...

Brauchst du auch nicht. Code reinkopieren, speichern und die URL in der Adresszeile kopieren.

 

[MJayFux]

https://jsfiddle.net/hy2102o4/

 

[dn3d_fanboy]

https://jsfiddle.net/hy2102o4/2/

 

[MJayFux]

Nein, leider auch nicht ... wenn ich dieses CSS einfüge, dann befindet sich die Headergrafik HINTER dem Logo, aber es bewegt sich nicht. Die Headergrafik soll vom Logo getrennt bleiben.

 

[MJayFux]

Nach einem Austausch mit dn3d_fanboy habe ich es, bzw. haben wir es jetzt soweit hinbekommen, dass die Headergrafik hinter der oberen Menüleiste verschwindet, leider ändert sich aber die Größe der Headergrafik immer noch nicht, und das untere Menü bleibt nun beim Scollen auch nicht mehr oben stehen ...

Hier mal der Link zur Seite: https://x-archive.org/services-2/

Lösungen welcome

 

[Myhar]

Der Link ist ein sehr gutes Beispiel warum man nicht zu viel in einen "onscroll" Handler packen sollte. Ich kann hier nicht mehr scrollen, er springt immer sofort wieder nach oben zurück. Außer ich scrolle ganz viel ganz schnell. Ich kann hier also nicht wirklich etwas erkennen, wo man sinnvoll Fehlersuche betreiben kann.

 

[MJayFux]

Okay, danke für eure Hilfe.

 

[MJayFux]

Ich habe jetzt folgendes im Code...

Im Footer von WordPress:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).on("scroll touchmove", function () {
$('#header-picture').toggleClass('tiny', $(document).scrollTop() > 0 );
$('#main-header').toggleClass('tiny', $(document).scrollTop() > 0 );
});

});//]]>
</script>

In der CSS des Child-Themes:

#main-header { position: relative !important; margin-top: -500px !important; }

#header-picture {
background: url("...") top center no-repeat;
background-size: auto;
position: relative;
width: 100%;
height: 364px;
margin: 0;
padding: 0;
text-align: center;
transition: height 500ms, position 500ms;
}

#header-picture.tiny, #main-header.tiny {
position: fixed !important;
height: 100px !important;
overflow: hidden;
}

Leider macht Firefox aber dennoch nix, aber vielleicht hilft euch das weiter.