notifications-admin/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

// CSS adapted from
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling

$sticky-padding: $gutter * 2 / 3;

.js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling {

  overflow: hidden;
  margin-left: -$gutter-half;
  padding: 10px 0 0 $gutter-half;
  position: relative;

  .form-group {
    margin-bottom: 20px;

    legend {
      outline: none;
    }
  }

  .back-to-top-link {
    position: absolute;
    top: $gutter;
    right: $gutter-half;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
  }

}

.js-stick-at-top-when-scrolling {

  margin-top: -10px;
  margin-bottom: 5px;
  top: 5px;
  transition: top 0.1s ease-out, box-shadow 1s ease-in-out;

}

.js-stick-at-bottom-when-scrolling {

  transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
  padding: $sticky-padding 0 $sticky-padding $gutter-half;
  margin-top: -$sticky-padding;

  & + .js-stick-at-bottom-when-scrolling {
    margin-top: ($sticky-padding * 2) * -1;
  }

  .page-footer {
    margin-bottom: 0;
    min-height: 50px;
  }

  .page-footer-delete-link-without-button {
    margin-top: 10px;
  }

  .notification-status {
    margin: 0;
  }

  .button-secondary {
    margin-right: $gutter-half;
  }

}

.content-fixed,
.content-fixed-onload {

  position: fixed;
  background: $white;
  z-index: 100;
  padding-right: $gutter-half;
  margin-top: 0;

  .back-to-top-link {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
  }

}

.js-stick-at-top-when-scrolling.content-fixed,
.js-stick-at-top-when-scrolling.content-fixed-onload {

  top: 0;
  margin-top: 0;

}

.js-stick-at-top-when-scrolling.content-fixed__top {

  border-bottom: 1px solid $border-colour;
  box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);

}

.js-stick-at-top-when-scrolling.content-fixed {

  transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;

}

.js-stick-at-bottom-when-scrolling.content-fixed,
.js-stick-at-bottom-when-scrolling.content-fixed-onload {

  top: auto; // cancel `top: 0;` inherited from govuk-template
  bottom: 0;

}

.js-stick-at-bottom-when-scrolling.content-fixed__bottom {

  border-top: 1px solid $border-colour;
  box-shadow: 0 -2px 0 0 rgba($border-colour, 0.2);

}

.js-stick-at-bottom-when-scrolling.content-fixed {

  transition: background 0.6s ease-in-out;

}

.js-stick-at-bottom-when-scrolling-loaded.content-fixed-onload {

  transition: none;

}

.shim {
  display: block;
  margin-bottom: 5px;
}

.js-cancel {

  display: inline-block;
  padding: 10px 10px 5px 10px;
  margin-top: -10px;
  margin-right: -10px;
  text-decoration: underline;
  color: $govuk-blue;
  cursor: pointer;

  &:hover {
    color: $link-hover-colour;
  }

  &:focus,
  &:active, {
    background: $yellow;
    color: $govuk-blue;
    outline: none;
  }

}