Header: Add option for sticky header about newspack-theme

[matticbot]

🎉 This issue has been resolved in version 1.49.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[laurelfulford]

Ah, thanks @AktharAzif -- I'll have to explore that :)

It looks like https://thewiretap.in/ is a private site, so unfortunately I can't check that one out.

[laurelfulford]

We've had another request for this functionality from @AkkiVerma in #621:

Is your feature request related to a problem? Please describe.
Sometimes the blog posts are quite long and since AMP doesn't have JUMP to TOP button, it can be sometimes very frustrating scrolling back to the top.

Describe the solution you'd like
I've checked code and the amount of CSS required for adding just JUMP to TOP button, hence rather I think it is better to provide an option for enabling sticky header on both desktop and mobile so that it becomes easier for users to navigate to other pages.

Describe alternatives you've considered
There is none so far.

Additional context
I am hoping if sticky header can also have a search button along with the menu button when on mobile.

[eduardogoncalves]

@laurelfulford and if it it was 'smart sticky', like https://www.saibatudomt.com.br/
As Newspack uses AMP, this can be achieved by add amp-fx="float-in-top" to container, and style container with required css

  position: fixed;
  top: 0;
  overflow: hidden;

<header id="page-header" amp-fx="float-in-top">
      <div on="tap:header-sidebar.toggle" role="button" tabindex="0" class="navbar-trigger" title="Exibir o Menu" aria-label="Menu">
        <amp-img width="24px" height="24px" layout="fixed" src="https://www.saibatudomt.com.br/wp-content/themes/saibatudo2019/img/twotone-menu-24px.svg" alt="" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed">
      </amp-img></div>

      <div class="logo">
        <a href="/" data-rel="prefetch">
        <amp-img width="124px" height="48px" layout="fixed" src="https://www.saibatudomt.com.br/wp-content/themes/saibatudo2019/img/SaibaTudoMT.svg" alt="SaibaTudoMT" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:124px;height:48px;" i-amphtml-layout="fixed">
      </amp-img></a>
      </div>

      <div on="tap:search-sidebar.toggle" role="button" tabindex="0" class="navbar-trigger">
        <amp-img width="24px" height="24px" layout="fixed" src="https://www.saibatudomt.com.br/wp-content/themes/saibatudo2019/img/twotone-search-24px.svg" alt="Busca" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed">
      </amp-img></div>
    </header>

When setting position: fixed; top: 0; to .site-header we'll need some extra css to fix header's layout:

So if there's no one working on this, I can take it! Let me know.

[laurelfulford]

Apologies! I ended up creating a second issue for this, which is just splitting the information (#826).

We do still plan on adding this -- thanks for your exploration @eduardogoncalves! One issue I ran into with float-in-top is the required overflow: hidden -- it means that menus with dropdowns ends up getting cut off. So we'll probably need to figure out a way to fit that in with the other header settings that we offer.

I copied over some other details from #826 from myself and @thomasguillot, and will close the newer issue:

The main potential issue is height: the header's height, in part, depends on the size of the logo, so it can be variable. We will need to 'know' the height to set a proper sticky menu. This is usually done with JavaScript, but using AMP limits what's available there. So this will need digging into -- it may be possible to use the same scroll-position logic that's used in the popups, or we could set a fixed height for the headers with this setting -- overriding the custom logo size -- to ensure they're a consistent height.

I would do this because:

1. We don't have to worry about JS. It can be done with CSS-only.
2. We avoid bad practice if a site has a massive fixed header that takes 50% of the screen height.

I'd hoped to use AMP's float-in-top effect for this (which has the header scroll away with the page, but appear again when you scroll back up), but it requires you to have overflow: hidden on the element, which means, for the header, that the menu dropdowns get cut off.

[philipjohn]

Another request came in today from a publisher for this feature.

[matticbot]

🎉 This issue has been resolved in version 1.49.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀