スクロールのjQueryスティックヘッダー

Question

私はサブヘッダーを上部に付けるために細かくスニペットを作成しました。 しかし、私が言ったように、以来 - 私はでていない天才やjQueryの天才JSを意味します - 実際にははるかにそれからと - 私は自分のコーディング能力についての私の疑問を持っている...

• デモはここにある：http://jsfiddle.net/obmerk99/VvKq3/1/

質問：

• 1 - 私のスニペットよりもはるかに多くのコードで（も この非常にサイト内や多くの質問）のプラグインの多くがあるように思われる - 私は メートル何をしています発行？私は間違って何をしていますか？
• 2 - これはクロスブラウザで動作しますか？
• 3 ..これは小さな問題です、どのように発生する小さな "ジャンプ"を避けるために？ （あなたはフィドルに行けば、そしてゆっくりとををスクロール - あなたはスクリプトが誘発されたときに、メインのdivが「ジャンプ」ことがわかります。.. 私は下のdiv要素に別の拡張子が.padクラスを追加しようとしました -

。

追加されたクラス：スクリプトが誘発.pad

拡張子が.pad {パディングトップ：42px;}

は、正しく動作するように思われない。http://jsfiddle.net/obmerk99/VvKq3/2/

• 5 divの実際の位置はどのように計算できますか？私はこのような 何かをしようとすると：

var top = jQuery(window).scrollTop(); 

var div_top = jQuery('#header_stick').offset().top; 

if (top > div_top) // height of float header; 

それはビクビクです... http://jsfiddle.net/obmerk99/VvKq3/4/

• 6他の提案は歓迎されている。..

Answer 1

」要素が親要素のスペースを占有していたためにジャンプが発生し、posiを変更するとfixedになってしまったので、それはもう突然ではありません。 私はそれを処理する最善の方法はわかりませんが、1つのオプションは、同じ高さを持つ #header_stickの直前に小さなスパン（たぶんスペースは1つ）を追加することです。クラスが変更されても高さの違いを説明するために何かあるべきである。 （更新：あなたのパッド・ソリューションはdone rightたら、おそらく最高の一つであり、以下を参照）：1）あなたは時にユーザーがスクロールトップにそのクラスを削除することを忘れないでください

あなたのパディングソリューションはまたことを提供、うまくいくかもしれません（あなたのフィドルで私はあなたがそれを追加するのを見ますが、あなたがそれを取り除くのを見ません）。 2）あなたは高さの権利を得る - 私はまだあなたのコードに密接に見えることができなかったので、あなたが間違っていたか分からない。（編集：問題は、あなたの.padクラスが浮動ヘッダの高さではなく、スティックヘッダ使用していたということでした - それを固定し、クラスを削除するには、私がcorrect resultであると信じるものをもたらした）

の実際の位置についてdiv、親要素のオフセットからdivのオフセットを減算してみましたか？このようにして、あなたは親との相対的な立場を取るでしょう（境界線のようなものに注意を払う - 最近私はansweredのような詳細が重要な別の質問です）。

更新：ここでの問題は、位置が固定に変更されたときにオフセットが大きく変わることがあるようです。正しい高さを1回計算してから、どこかに格納してスクロール機能で使用できるようにすることをお勧めします。言い換えれば、スクロール中にそれを計算しないでください。そうすれば、クラススイッチを行うために適切なものが見つかるのはずっと難しくなります。それ以外

は、私はあなたがコードは結構です、と私はそれが（; IEの古いバージョンについては何も言うことができない、少なくとも標準に準拠したもの）あまりにもクロスブラウザを動作すると信じていると思います。非常に洞察力にあまりにも、私はいつもこの「トリック」が働いていたか疑問に思い、今私は

Answer 2

あなたがこの方法を試すことができます...それは私が想像よりも簡単です参照してください。私は簡単な分析のために短いバージョンを作った。 fiddle here

<div id="ontop">floating heading</div> 
<header>sticky heading</header> 
<div id="wrapper"> 
    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/> 
</div> 



#ontop {width:100%; height:80px; background-color:yellow;} 
header {width:100%; height:20px; background-color:lightgrey; } 
#wrapper {background-color:lightblue; height:5000px;} 

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;} 


$(function() { 
    var elem = $('header'), 
     wrapperElem = $('#wrapper'), 
     elemTop = elem.offset().top; 
    $(window).scroll(function() { 
     elem.toggleClass('navfixed', $(window).scrollTop() > elemTop); 
     wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop); 
    }).scroll(); 
});