Mozilla Protocol
  • 19.1.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-title-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>