jquery - 通过 scrollTop 值缩小标题高度

Question

你好！

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

到目前为止我所拥有的：

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

任何想法如何解决它？

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();