Уменьшить высоту заголовка значением scrollTop
Howdey!
Простая проблема: у меня фиксированный заголовок, высота уменьшается в зависимости отwindow scrollTop
-значение до половины его высоты.
Что у меня так далеко:
HTML
<div id="header">
<img src="http://yckart.com/ph?text=scroll down" alt>
</div>
CSS
body{padding-top:200%} /* not really needed */
#header {
position:fixed;
top:0;
left:0;
right:0;
height:200px;
color:#eee;
background:#222
}
#header img {height:100%; width:auto}
JS
var header = $('#header'),
headerH = header.height();
$(window).scroll(function() {
if ($(this).scrollTop() <= headerH / 2) {
header.css({
height: -($(this).scrollTop() - headerH)
});
}
}).scroll();
Вот этоиграть на скрипке.
До сих пор работает хорошо. Однако, если пользователь прокручивает вниз, например, вниз и перезагружает страницу, оператор if не работает.
Есть идеи как это исправить?