通过scrollTop值缩小标题高度

Howdey！

简单问题：我有一个固定的标题，高度根据window scrollTop -value缩小到其高度的一半。

到目前为止我所拥有的：

HTML

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语句不起作用。

任何想法如何解决它？

Answer 1

if语句没有错。 当初始滚动状态位于底部时，您需要添加else语句。 例如：

  var header = $('#header'), headerH = header.height(); $(window).scroll(function() { if ($(this).scrollTop() <= headerH / 2) { header.css({ height: -($(this).scrollTop() - headerH) }); } else { header.css({ height: headerH / 2 }); } }).scroll();