Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Headergrafik bis zu einer bestimmten Position mitscrollen lassen

MJayFux

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

Hat es drauf

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

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.
 

MJayFux

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

Aktives Mitglied

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.
 

MJayFux

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

Aktives Mitglied

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

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

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

Hat es drauf

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

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben