header fix auf scrollen zu einer bestimmten Position

Question

Ich arbeite an einer Webseite, wo ich ein div an der Oberseite von ich ein Scroll-Fenster zu diesem div und release fix Position wenn ich scrollen über diesem div aber ich bin ein Problem die div ist nicht festgelegt wird, wenn ich dort erreichen

hier ist mein Code

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

.customer_bills_head.position_fixed{ 
    position: fixed; 
    left: 0; 
    top: 70px; 
    z-index: 9; 
} 

Answer 1

Nun, ich überprüfte Ihren Code und es funktioniert tatsächlich, also überprüfen Sie Ihre Konsolenprotokolle, vielleicht einige andere Skripte sind dies durcheinander bringen. Überprüfen Sie, ob jQuery korrekt geladen wurde und Sie keine Konflikte haben. Firebug oder Browser-Entwickler-Tools und Konsole wird helfen.

Überprüfen Sie auch andere Stile, die es vermasseln könnten.

Ich fügte nur 200px Rand oben für .customer_bills_head, und margin-top: 0; wenn Sie es erreichen, und einige Stile für die Simulation.

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/