Adding a sticky header & footer

Dev
6

It works but the top banner makes the composer smaller.

It probably better to hide banner when the composer is open.

There is a class .composer-open what you can target here to hide the banner when the composer is open.

Mobile / CSS 
body {
--banner-height: 40px;
  // Header
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Top banner
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Bottom banner
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Move topic progress wrapper the top of the bottom banner
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Add banner height to composer max height calculation
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }  
}

Edit: I made some correction on the code.

3 Likes