Ich habe mich der Sache nochmal angenommen.
Was du noch vergessen hast ist der Mobile Navigationsbutton, dieser muss ja in dem Fall auch seine Farbe ändern.
Ich fasse noch einmal zusammen.
Ab Scrollposition Null:
- Logobereich Transparent
- Navigation Weiß
- Logo1 in Weiß
- Mobiler Navigationbutton Weiß
Ab einer Scrollposition von 300 Pixeln:
- Logobereich Weiß (leicht durchscheinend)
- Logobereich unten Schatten
- Navigation Schwarz
- Logo2 in Schwarz
- Mobiler Navigationbutton Schwarz
LINK zur Testseite.
Da kommt dann schon ein wenig Code zusammen. Ich hoffe du blickst da noch durch.
Einstellungen > CSS
<style>
.noshadow, .noshadow > .navbar-inner {
background:transparent;
min-height: 60px;
transition: all 0.2s ease 0s;
}
@media (max-width: 568px) {
.noshadow, .noshadow > .navbar-inner {
min-height: 60px !important;
}}
.navbar .nav > li > a {
color: #fff;
}
.navbar .nav > li.active > a {
color: #fff;
}
.llogo {
position: fixed;
top:10px;
margin-left:-475px;
left:50%;
z-index:6100;
}
@media (max-width: 975px) {
.llogo {
margin-left:0;
left:10px;
}}
.llogo2 {
display: none;
position: fixed;
top:10px;
margin-left:-475px;
left:50%;
z-index:6100;
}
@media (max-width: 975px) {
.llogo2 {
margin-left:0;
left:10px;
}}
.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover{
color: #fff;
border: 1px solid #fff;
}
</style>Widget > Quelltext
<!-- LOGO -->
<div class="llogo">
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo/logowe.png" alt="Logo"></a></div>
<div class="llogo2">
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo/logosw.png" alt="Logo"></a></div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=300){
jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background: rgba(255, 255, 255, 0.98); box-shadow: 0px 10px 7px -6px rgba(0,0,0,0.2) !important;');
jQuery('.navbar .nav > li > a').attr('style','color: #000;');
jQuery('.llogo').attr('style','display: none;');
jQuery('.llogo2').attr('style','display: block;');
jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #000; border: 1px solid #000;');
}
else if (jQuery(this).scrollTop()<300) {
jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background:transparent !important;');
jQuery('.navbar .nav > li > a').attr('style','color: #fff;');
jQuery('.llogo').attr('style','display: block;');
jQuery('.llogo2').attr('style','display: none;');
jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #fff; border: 1px solid #fff;');
}
})
})
</script>PS: Wenn du das ganze jetzt so in Stripe Responsive erstellst und auf dem Handy anschaust wirst du wahrscheinlich feststellen das sich die Änderung des Logo-Bereiches zu spät einstellt (300px). Deshalb habe ich im im Layout-Designer die Grundeinstellung (vw) in (60vh) geändert. Somit sollte genügend Raum für alle Bildschirme vorhanden sein. Wichtig ist hierbei das der Focus deiner Header-Grafik im Zentrum liegt.
Nochmal PS: Im Querformat (Handy passt das noch nicht ganz). Ich kenne deine Header-Grafik leider nicht.
Entweder das (60vh) im Layout-Designer hoch setzen oder eben die 300px Scrollposition runter setzen. Musst du einfach testen wie deine Header-Grafik dann besser zur Geltung kommt.
