最近、新しいgmailと、スクロール時にナビゲーションバーをブラウザウィンドウの上部に固定するHTML5ビンプレビューの新しい興味深い機能がありました。バーはページの100pxから開始することができますが、スクロールしてブラウザウィンドウの一番上に達すると、最初に配置された場所の上にスクロールバックするまでそこに固定されます。スクロール時にブラウザウィンドウの上部にオブジェクトを修正しました
私の質問は、どうすればこの効果を出すことができますか、またはこの効果に類似したことをすることができますか？
私の質問と私が何を説明しようとしているのか理解できれば幸いです。
にdiv要素の位置を設定することにより
は、使用：
#element {
position: fixed;
right: 200px;
top: 200px;
}
は "固定" 要素は、ブラウザウィンドウに対して位置決めされています。 position:fixed
あなたは要素がさらに下のページに開始したい場合は、その上に固定したまま使用すると、下にスクロールするように、これは良いスタートかもしれ：
ブラウザが "位置：固定の" サポートされている場合はjavascriptの例次の平野はもっと速いです：
<html>
<head>
<style>
html,body {
margin: 0;
}
#navbar.navbar_fixed {
position:fixed;
top:0px;
width:100%;
height:100px;
background-color:#f00;
}
#navbar.navbar_absolute {
position:absolute;
top:100px;
width:100%;
height:100px;
background-color:#f00;
}
</style>
<script type="text/javascript">
function window_onload() {
window.addEventListener("scroll",navbar_reset_top,false);
}
var navbar_top=100;
function navbar_reset_top() {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
document.getElementById("navbar").className="navbar_fixed";
}
else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
document.getElementById("navbar").className="navbar_absolute";
}
}
</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>
これは、常にスクロールするたびに再配置される、他の提案のちらつきを解消するので、より良い解決策です。 –
I K私はちょうどjqueryバージョン（クリーナーと設定可能な少し）を追加したかったのですが、それはAndrew D.の答えの修正版です。
この場合、私は相対的な位置のdivを持っていると私は特定のポイント（max_scroll）に達したときに、私は、オブジェクトにクラスを追加し、そのクラスはそれが
をフロートにするものである代わりに、2つのクラスがありません私の、少なくとも以下はjavascriptの（すべてがデドキュメントレディ機能の内部で行われる）
<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){
$(window).scroll(function() {
var navbar = $(".filterbutton");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
navbar.addClass("filterbuttonFixed");
// console.log("go floated");
}
else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed")) {
// console.log("return to normal");
navbar.removeClass("filterbuttonFixed");
}
}
});
</script>
であり、これは私のナビゲーションバーのコンテナのdiv
<div id="floatable-nav-bar" class="my-relative-position-class">
<nav class="page-menu">
<ul class="scroll-nav">
<li><a class="selected" href="#first">Section 1</a></li>
<li><a class="" href="#second">Section 2</a></li>
<li><a class="" href="#third">Section 3</a></li>
<li><a class="" href="#fourth">Section 4</a></li>
</ul>
</nav>
</div>
と最後ではなく、 NAV-浮かべスタイル
#floatable-nav-bar.nav_floated {
position:fixed;
top:1px;
left: 0;
width:100%;
text-align: center;
background: #EEE;
padding: 5px 0;
}
私は、これは最も単純な例ではないですけど、jQueryのユーザーのために多分これは単純なアプローチである、と私は（少なくともそれがためだった、それだけで1つのクラスを追加および削除する方が良いと思います私）。あなたはそれをこのような何か行うことができます
ちょっとした提案： 'max_scroll = 450'ではなく、' max_scroll = $（ "＃floatable-nav-bar"）。position（）。top'を使うことができます。このようにして、ナビゲーションバーは自動的に上に移動します（jQueryを使用して、ブラウザ間のマイナーな相違点の上位のオフセットを検出します）。 –
私は、上の詰め物を固定する要素の高さを追加するために、同時にボディにクラスを追加するのが好きです。ページがジャンプせずスクロールが素敵でスムーズです。 '$（ 'body '）.addClass（ "FixedElementOffset"）;' – Nickfmc
：スクロール50ピクセルの後
CSS
body {
height: 3000px;
top: 0;
}
#image {
width: 100%;
background: #444;
height: 50px;
}
#scroller{
height:100px;
background:#ccc;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
スクリプト
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#scroller').addClass('stuck');
} else {
$('#scroller').removeClass('stuck');
}
});
をそれがスクロールバーのCSSを変更します。
これは、スクロールな長さを定義するというし、良いスタート
であってもよいし、なぜ我々は、オブジェクトの位置を定義することはできませんか？それがtop：0に達したら、スクリプトをトリガーします。このようにすれば、よりデバイスにやさしくなります。
これは本当に質問に答えるとは思わない。彼は「スクロールの長さを定義する」ことについて質問しませんでした（それが意味するものは何ですか？）彼は固定ヘッダーをどのように持つことができるか尋ねました。 – dman2306
このソリューションは、すべてのブラウザでひどくちらつきます。現代のブラウザでは、CSSを使って焼く方法である 'position：fixed'がサポートされています。 – sohtimsso1970
はい、私はもうこのソリューションを使用しません。それは当時の固定的な地位を設定するという私の限られた知識に基づいていました。 position：fixedを使用するソリューションが優れています。 –