0

やあ！

単純な問題: 私は固定ヘッダーを持っています。高さは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 ステートメントは機能しません。

それを修正する方法はありますか？

4

1 に答える 1

1

Nothing wrong with the if statement. You need to add an else statement for when the initial scroll state is at the bottom. E.g.:

    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();
于 2012-09-10T12:31:05.030 に答える