特定の位置にスクロールするヘッダーフィックス

Question

私はdivの上にdivを修正したいウェブページに取り組んでいます。そのdivにウィンドウをスクロールし、そのdivの上にスクロールしても問題を抱えていれば固定位置を解放します私はここにあり

に到達したときのdivは固定取得されていない私のコード

jqueryの

var customerBillHeadPos = $('.customer_bills_head').offset().top; 
$(window).scroll(function(){ 
    var windowPos = $(window).scrollTop(); 
    if(windowPos>=customerBillHeadPos){ 
     $('.customer_bills_head').addClass('position_fixed'); 
    } else { 
     $('.customer_bills_head').removeClass('position_fixed'); 
    }; 
}); 

CSS

です

Answer 1

さて、私はあなたのコードをチェックしました。実際には動作していますので、コンソールログを確認してください。 jqueryが正しくロードされていて、競合がないかどうかを確認してください。 Firebugやブラウザの開発ツールやコンソールが役立ちます。

他のスタイルもチェックしてください。

私は、.customer_bills_headとmargin-top：0に対して200px margin topを追加しました。あなたがそれに到達したとき、そしてシミュレーションのためのいくつかのスタイル。私はその完璧に作業負荷機能で、このスクリプトを書いていたときに

body{ 
    margin: 0; 
    padding: 0; 
    background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ"); 
    height:2000px; 
} 

h1{ 
    color:white; 
} 
.customer_bills_head{ 
    width:100%; 
    height:110px; 
    margin-top:200px; 
    background: #666 
} 
.customer_bills_head.position_fixed{ 
    position: fixed; 
    left: 0; 
    top: 0px; 
    z-index: 9; 
    margin-top:0; 
} 

https://jsfiddle.net/syLdLeet/2/