Ich habe das ganze nochmal verfeinert. Damit der Logobereich nicht so groß ausfallen muss habe ich diesen mit CSS nach unten gerutscht. Dieser wird beim Scrollen wieder nach oben korrigiert und wenn zurück gescrollt wird wieder hergestellt.
https:
//hosting.
zeta-producer.
com/6510327388/topbar2.
html">https:
//hosting.
zeta-producer.
com/6510327388/topbar2.
html
Der Scroll-Effekt sieht auch sehr viel besser aus als bei Vodafone. https:
//www.
zella.
de/forum/images/smilies/emojione/1f61c.
png" alt="8o" class="smiley" srcset="https:
//www.
zella.
de/forum/images/smilies/emojione/1f61c@2x.
png 2x" height="23">
Hier nochmal der gesamte Code:
CSS:
<
style>
header {
padding-top: 30px;
transition: all 0.
25s;
}
.
topbarzp {
position:
absolute;
left:
58px;
top:
0;
z-index:
30000;
}
.
spaltentopbarzp{
float: left;
font-size: 14px;
background:
blue;
padding: 4px 20px 4px 20px;
text-align: center;
text-decoration: none;
transition: all 0.
4s ease;
}
a.
spaltentopbarzp {
color: #fff !
important;
text-decoration: none;
transition: all 0.
4s ease;
}
.
spaltentopbarzp:
hover {
background:
#fff !
important;
}
a.
spaltentopbarzp:
hover {
color: #000 !
important;
}
.
spaltentopbarzp:
active {
background:
#fff !
important;
}
a.
spaltentopbarzp:
active {
color: #000 !
important;
width: 33%;
}
@media (max-width: 500px) {
.
spaltentopbarzp {padding: 4px 6px 4px 6px;
}
.
topbarzp {left:
0;
}
}
@media (max-width: 319px) {
.
spaltentopbarzp {font-size: 10px; text-transform: uppercase;
}
}
<
/style>
HTML:
<
div class="topbarzp">
<
a class="spaltentopbarzp" href="#">
<
span>
Privatkunden<
/span>
<
/a>
<
a class="spaltentopbarzp" href="#">
<
span>
Gewerbekunden<
/span>
<
/a>
<
a class="spaltentopbarzp" href="#">
<
span>
Kundenportal<
/span>
<
/a>
<
/div>
<
script type="text/javascript">
jQuery(document).
ready(function(){
jQuery(window).
scroll(function(){
if(jQuery(this).
scrollTop()>
=50){
jQuery('header').
attr('style',
'padding-top: 0px !
important;
');
}
else if (jQuery(this).
scrollTop()<
50) {
jQuery('header').
attr('style',
'padding-top: 30px !
important')
}
})
})
<
/script>
