Loading...
 
Skip to main content

History: Sticky Topbar

Source of version: 2 (current)

Copy to clipboard
            {REMARKSBOX(type="warning" title="Warning")}This will erase any code in your -+Custom JavaScript+- preference on the Look and Feel Control Panel.
Make a backup of that before running this profile.
{REMARKSBOX}

{CODE(caption=>YAML,wrap=>0)}
preferences: 
 header_custom_js: |
  (function(window,undefined){
  // Duplicate topbar, rename to topbar-clone, re-inject somewhere in the page
  $('#topbar').clone()
  .attr("id","topbar-clone")
  .insertAfter('#topbar');
  // Place on top of page but hidden at first
  $('#topbar-clone').css({
  position: 'fixed',
  top: '0px',
  width: 'inherit',
  display: 'none',
  'z-index': 3
  });
  // Get and store default display style for topbar
  $topbar_display = $('#topbar').css('display');
  $(window).on("scroll", function () {
  if ($(window).scrollTop() > $('#topbar').offset().top) {
  // If topbar scrolls out of the visible page, display topbar-clone
  $('#topbar-clone').css('display', $topbar_display).css('width',$('#topbar').width());
  } else {
  // If topbar is visible, hide topbar-clone
  $('#topbar-clone').css('display','none');
  }
  });
  })(window);
{CODE}