Fix navigációs sáv klónozással

Youtube miniatűrök
2023-10-20

Fix utazó menüre van szükséged? Itt a tökéletes megoldás. Készítsd el a menüt egy navbar classal rendelkező elemből – div, nav, section, header – és görgetés esetén megjelenik a klónozott menü.

$('.navbar').addClass('original').clone().insertAfter('.navbar').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)) {
    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');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility', 'visible');
  }
}

 

Comments are closed.