読者です 読者をやめる 読者になる 読者になる

tech::hexagram

personal note for technical issue.

スクロールしたらついてくるナビゲーションバー的なもの

○スクロールしていって、ウィンドウ1つ分の高さまではそのまま
○ウィンドウ1つ分を超えてスクロールすると上部に張り付く

的なnavigationbarの実装方法。

実装例

            var isScrolledOverWindow = false;

            $(window).scroll(function(){
                var scrollValue = $(this).scrollTop();
                if (scrollValue > navigationHeight){
                    if (!isScrolledOverWindow){
                        isScrolledOverWindow = true;
                        element.css({
                            "position" : "fixed",
                            "z-index": 999,
                            "top": 0,
                            "bottom": "auto"
                        });
                    }
                } else {
                    if (isScrolledOverWindow){
                        isScrolledOverWindow = false;
                        element.css({
                            //元のCSSで設定したスタイル
                        });
                    }
                }
            });