CODEWITHSUNDEEP
amp-html
LeonidMew
LeonidMew

Reputation: 502

Accelerated Mobile Pages(AMP) How to make fixed header?

Question only belongs to AMP. I believe this quote simple question. Had try to make position fixed for element, it shows warning in js console, and header moved a few pixels away where it should be. I've look at examples, but there are too much code/styles, so didn't understood how they do that task.

I need to make element fixed at top while scrolling page, this element contains two buttons - menu and share and site title, good if buttons can float left/right.

I had no problems with similar on usual pages, either mobile, or desktop, but I'm new for AMP.

Upvotes: 0

Views: 1765

Answers (1)

LeonidMew
LeonidMew

Reputation: 502

I found a solution there: https://amp-demos.glitch.me/sticky-header.html It's different from what I need, it selects menu item depending on part of article, currently reading using animation and observer addons. However I found it easy to modify. In my example menu moving as it should, and have sub menu items. Animations removed, its easy to bet it back, just compare two versions.

CSS: 

:root {
  --header-height: 3em;
}
.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
}
.sticky-header .item {
  position: relative;
}
.sticky-header .item > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: var(--header-height);
}

.sticky-header .item .selected {
  opacity: 0;
}

/* move anchor sections below the sticky header */
:target {
  display: block;
  position: relative;
  top: calc(-1 * var(--header-height) - 8px);
  visibility: hidden;
}

/* general styling */
h1 {
  text-align: center;
}
h1, main {
  margin: 1rem;
}
a, a:visited {
  color: inherit;
  text-decoration: inherit;
  background-color: inherit;
}
.sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: inherit;
}
.sticky-header .item {
  height: 100%;
  width: 100%;
}
.sticky-header .item > * {
  text-align: center;
  color: inherit;
}
.sticky-header .item .selected {
  color: red;
}
.submenu {
  display:none;
}
.item:hover .submenu {
  display:  block;
  position: relative;
  top: var(--header-height);
  line-height: 2em; //calc(1em + 12px);
  background: black;
}
.item:hover .submenu a {
  display: block;
}

Html part, simplified:

<div class="sticky-header">
  <div class="item" tabindex="0" role="button">
    <a href="#item1">Item 1</a>
    <div class="submenu">
      <div tabindex="0" role="button"><a href="#s1">Sub menu</a></div>
      <div><a href="#s2">Sub menu</a></div>
      <div><a href="#s3">Sub menu</a></div>
    </div>
  </div>
  <div class="item" tabindex="0" role="button">
    <a href="#item2">Item 2</a>
  </div>
  <div class="item" tabindex="0" role="button">
    <a href="#item3">Item 3</a>
  </div>

@Ryan provided his own method in comments, but I found it difficult to inspect site for needed code, then just small simple example.

Upvotes: 1

Related Questions