[英]replace the menu and stick it to top on scroll
我想用滾動條上的另一個替換導航菜單,並將新菜單粘貼在頁面頂部。
對於粘性菜單部分,我使用了以下JavaScript代碼:
// 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');
}
};
但我不知道如何執行替換零件。謝謝
編輯(答案):所以我稍微修改了KLAJDI的答案,這是代碼:
$(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');
}
});
});
你的意思是這樣的:
$(function(){ // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#stickyheader').offset().top; $(window).scroll(function(){ if( $(window).scrollTop() > stickyHeaderTop ) { $('#stickyheader').css({position: 'fixed', top: '0px'}); $('#stickyalias').css('display', 'block'); } else { $('#stickyheader').css({position: 'static', top: '0px'}); $('#stickyalias').css('display', 'none'); } }); });
table { background: black; color: white;} body, td { font: 13px sans-serif; } #stickyheader { width: 100%; height: 10px; } #stickyalias { display: none; height: 10px; } #unstickyheader { margin-bottom: 15px; } #othercontent { margin-top: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="unstickyheader"> <p>This is some text that comes before our <strong>Sticky Header</strong></p> </div> <div id="stickyheader"> <table width="100%"> <tr> <td>Sticky Text 1</td> <td>Sticky Text 2</td> <td>Sticky Text 3</td> <td>Sticky Text 4</td> <td>Sticky Text 5</td> </tr> </table> </div> <div id="stickyalias"></div> <div id="othercontent"> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> <p>Content Here<p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.