Mozilla Protocol
  • 22.0.0

Notification Bar: Sticky

A notification bar can be absolutely positioned at the top of the page by adding the class mzp-is-sticky. It will overlap and cover other content on the page so sticky notifications should usually include a button to dismiss it (the button in this example isn’t functional, it’s just for demonstration).

<aside class="mzp-c-notification-bar mzp-is-sticky">
  <button class="mzp-c-notification-bar-button" type="button">Close notification</button>
  <p>This floating bar will stick to the top of the window as you scroll.</p>
</aside>


<div class="mzp-l-content mzp-t-content-sm">
  <h1 class="mzp-u-heading-sm">This is just some filler content so you have
    something to scroll</h1>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio temporibus
    assumenda laudantium, ullam illo porro nisi tempore, esse cupiditate hic
    dolore nobis repudiandae similique illum repellendus tempora vero tenetur
    perspiciatis?</p>

  <p>An vix scriptorem contentiones, an pri postea salutatus mnesarchum. Copiosae
    omittantur reformidans an mea, iudico ridens evertitur te mei. Has ei fierent
    salutandi, mei causae legimus eligendi eu. Quod dicit noster vel eu, te
    appareat pertinacia eam.</p>

  <p>An sed luptatum recusabo. Iuvaret corpora ea sed. Vim odio solum eleifend
    an. Ad mandamus conclusionemque cum, mel cu etiam aperiri voluptua. Vis modo
    dolorum suavitate et. Eam te graeco animal percipit.</p>

  <p>Cum no aeterno dolorum. Malis antiopam hendrerit ex nec, impedit noluisse
    reprimique sed ne. Vis diam natum tempor ea, cu ius utinam praesent
    dissentias. Animal iudicabit repudiandae ad vim.</p>

  <p>Est sale dicam soluta ad. Vix facer oratio tacimates an, ius te nibh
    dissentiet persequeris, magna impedit quaerendum sea no. Ut copiosae
    referrentur duo, cu dolor ceteros cotidieque pri. Ea cibo assentior sea.</p>
</div>