0
Wenn ich die Seite blättern möchte, möchte ich die Kopfzeile animieren. Es sollte slideUp, fügen Sie eine Klasse und slideDown.SlideUp-Callback fügt keine Klasse zum Element hinzu
Die slideUp und slideDown funktionieren wie erwartet, jedoch wird die Klasse header-small nicht hinzugefügt. Woher?
$(function() {
var moved = false,
header = $('header');
$(window).scroll(function() {
if ($(document).scrollTop() > 20) {
if (moved == 'false') {
header.slideUp(500, function() {
$(this).addClass('header-small').slideDown('slow');
});
moved = true;
}
} else {
header.slideUp(500, function() {
$(this).removeClass('header-small').slideDown('slow');
});
moved = false;
}
});
});body,
html {
height: 300%;
}
header {
position: fixed;
height: 2em;
background: lightblue;
top: 0;
left: 0;
width: 100%;
}
.header-small {
font-size: .75em;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
This is a header with text
</header>Ich habe $(this) zu $('header') versucht zu ändern, aber dasselbe Ergebnis.
' 'false'' String truthly Wert in Javascript, verwenden 'bewegt === false' https://jsfiddle.net/fhqh1tx2/ –
Wow ... das ist die Antwort ... danke. – LinkinTED
@ A.Wolff, fügen Sie es als Antwort hinzu und ich werde es akzeptieren – LinkinTED