What's the best way to add a not-fixed banner

[damithc]

Context:

Currently, I've put this yellow banner inside the <header fixed> element, together with the top <navbar> element. Which means they both stay at the top of the page all the time.
Ideally, I would like the banner part to be not-fixed, which means it should scroll with the page (reason: to prevent it taking screen space permanently). But I want the navbar element to stay fixed at the top of the page.

Is there a way to achieve that? If yes, what's the best way?

@MarkBind/active-devs

[jonahtanjz]

Doesn't seem like there is any proper way to do it? A workaround that I can think of is to put in custom script into the header layout file.
Give the banner wrapper an id, then put in these custom script and style below:

<header fixed>
  <div id="header_banner">
    // Banner here
  </div>
</header>

// custom script and style to put in the header file
<script>
  document.addEventListener('scroll', () => {
    const banner = document.getElementById('header_banner');
    if (window.scrollY > 100) {
      banner.style.maxHeight = 0;
    } else {
      banner.style.removeProperty("max-height");
    }
  }) 
</script>
<style>
  #header_banner {
    /* set the max-height according to how much content is in the banner */
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.6s ease-out;
  }
</style>

There may be other better ways to do it but this is what I can come up with for now.

[damithc]

Thanks for the solution @jonahtanjz Let's see if others have any alternatives. If none, perhaps we can add built-in support for a <banner> component?

[ang-zeyu]

#1560 would likely also allow this:

// your banner goes here
<header sticky>
...
</header>

[ang-zeyu]

another naive solution (dosen't work) (for discussion over in #1560):

• add fixed-header-padding to the announcement
• move the announcement element out of the header into the "content"
• remove fixed-header-padding from the 3 elements
• unfortunately, the site nav / page nav is now hidden behind the header as you scroll down.

A solution that would however work is extracting the announcement into the content-wrapper element (but then it wouldn't stretch the full screen).

[damithc]

My current approach to adding a banner seems to have another problem, as mentioned in this comment.

See reposense/RepoSense#1559 (review)

Should that be considered a bug or is my current way of adding a banner the problem?

[jonahtanjz]

Seems like this is because the mobile navigation menus are nested within the lower-navbar component which is before the banner element.

One workaround I can think of for now is to play with the z-index of the banner and the container of the navbar:

<header>
  <div style="position: relative; z-index: 2;">
    // navbar component here
  </div>

  <div style="position: relative; z-index: 1;">
    // banner component here
  </div>
</header>

[damithc]

Another use case (from https://se-education.org/)

Current:

Desired: