スクロールするとSlideDownされるヘッダをリロードしたときにも表示させたい。

ランディングページを作っており、
先頭にいるときはposition: fixedでヘッダ(ヘッダ①)が固定されるようにしております。
ある一定スクロールに達するとヘッダ①がSlideUpで非表示になり、新しいヘッダ②がSlideDownで表示されるような処理を追加しております。

ヘッダ②が表示されている状態でリロードを押すとスクロールの途中にも関わらずヘッダ①が表示され、ヘッダ②が表示されない状態になっています。

リロードがされたときに「先ほどまでスクロールされていた位置を保持し、その位置が一定以上であればヘッダ②を表示させた状態にする」という処理を追加したいと思っています。
Javascript内に変数を作りいろいろ試したのですが、うまく動作しなかったのでご助力いただけないかと思います。
ソースは現段階でのものになります。

宜しくお願いします。

html
1<body>
2    <div id="wrapper">
3        <header></header>
4        <div class="cbheader"></div>
5        <div class="contents"></div>
6        <div class="contents"></div>
7        <div class="contents"></div>
8        <div class="contents"></div>
9    </div>
10</div>

css
1header {
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6}
7.cb-header {
8    position: fixed;
9    top: 0;
10    left: 0;
11    right: 0;
12    display: none;
13}
14.contents {
15    width: 100%;
16    height: 300px;
17}

javascript
1<script>
2$(window).load(function(){
3    // スクロール位置を保持するための変数
4    var windowscrollposition;
5    window.onscroll = function ()
6    {
7        // スクロール位置の保持
8        windowscrollposition = document.body.scrollTop;
9    }
10    // スクロールして何ピクセルでアニメーションさせるか
11    scrollpx = 200px;
12    // スクロールのイベントハンドラを登録
13    window.addEventListener('scroll', function(e){
14        // 変化するポイントまでスクロールしたらヘッダ②を表示
15        if ( $(window).scrollTop() > scrollpx ) {
16            $("header").slideUp();
17            $(".cb-header").slideDown();
18            // 変化するポイント以前であればヘッダ②を非表示
19        } else if ( scrollpx > $(window).scrollTop() ) {
20            $(".cb-header").slideUp();
21            $("header").slideDown();
22        }
23    });
24});
25</script>

行動規範の内容に同意します

回答2件

登録するだけではなく、そこで一度呼び出しておけばいいのではないでしょうか？

javascript
1var scroll_handler = function(e){
2	// 変化するポイントまでスクロールしたらヘッダ②を表示
3	if ( $(window).scrollTop() > scrollpx ) {
4		$("header").slideUp();
5		$(".cb-header").slideDown();
6	// 変化するポイント以前であればヘッダ②を非表示
7	} else if ( scrollpx > $(window).scrollTop() ) {
8		$(".cb-header").slideUp();
9		$("header").slideDown();
10	}
11};
12
13// スクロールのイベントハンドラを登録
14window.addEventListener('scroll', scroll_handler);
15// とりあえず、一度呼び出す
16scroll_handler();