0
Ich möchte mein Navigationsmenü durch ein anderes auf Scroll ersetzen und das neue auf der Oberseite der Seite.ersetzen Sie das Menü und kleben Sie es oben auf Scroll
Für das klebrige Menü Teil I dieses JavaScript-Code verwendet:
// Create a clone of the menu, right next to original.
$('.panel_menu').addClass('original').clone().insertAfter('.panel_menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
$(".cloned").css('background-color', '#2f3a54');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
};
aber ich weiß nicht, wie das Ersatzteil auszuführen .. danke
Edit (Antwort): Also ich leicht modifiziert, um die Antwort von Klajdi und hier ist der Code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('.panel_menu').offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > stickyHeaderTop) {
orgElement = $('.panel_menu');
widthOrgElement = orgElement.css('width');
$('.panel_menu_clone').css({position: 'fixed', top: '0px'});
$('.panel_menu_clone').css('width',widthOrgElement).show();
$(".panel_menu_clone").css('background-color', '#2f3a54');
} else {
$('.panel_menu').show();
$('.panel_menu_clone').css('display', 'none');
}
});
});