Wenn die Webseite nach unten gescrollt wird, nachdem die Kopfzeile oben fixiert ist, springt die Bildlaufleiste hoch - javascript, jquery, html, css3

Grundsätzlich versuche ich, eine feste Kopfzeile oben zu haben, wenn die Seite gescrollt wird. Bitte finden Sie den folgenden Code-Ausschnitt, den ich verwendet habe.

//This method is used to fixed header, while page is scrolling.
var fixedPageHeader = {
fWScrolling : function () {
var div = $("#headinfor");
var start = $(div).offset().top;

$.event.add(window, "scroll", function(){
var p = $(window).scrollTop();
if((p)>start){
$(div).css("position","fixed");
$(div).css("top", "0px");
$(div).css("left","0px");
$(div).css("margin-top","-2px");
$(div).css("z-index","500");
}else{
$(div).css("position","static");
$(div).css("top","");
$(div).css("margin-top","0px");
$(div).css("z-index","0");
}
});
}
}

Wenn die Kopfzeile oben auf der Seite fixiert wird, springt die Bildlaufleiste nach rechts zurück, um zu beginnen. Ich werde nicht in der Lage sein, die Seite nach unten zu scrollen.

Antworten:

Grund für dieses Problem ist, wenn der Header behoben wirdOben im Browser wird seinem Z-Index ein Wert zugewiesen. Es wird also Platz zwischen dem Inhalt und der oberen Leiste des Browsers geschaffen, die x ist (bitte überprüfen Sie das Bild, das ich angehängt habe). Daher springt die Bildlaufleiste plötzlich nach oben.

https://drive.google.com/file/d/0B1dp9jlk2GZMYU9iM3lST2xzSkk/view?usp=sharing

Um davon zu profitieren, müssen Sie div mit der gleichen Höhe wie der Header erstellen. Wenn es beim Scrollen nach unten oben im Browser fixiert wird und beim Scrollen nach oben ausgeblendet wird.