AFW Pattern Lab

Sticky Jump Nav 

<div class="sticky-jump-nav">
    <div class="sticky-jump-nav__inner">
        <nav class="sticky-jump-nav__nav">
            <div class="sticky-jump-nav__list">
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Excepteur ut</div>
                </div>
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Reprehenderit dolor id</div>
                </div>
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Minim ea Labore</div>
                </div>
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Cillum Fugiat</div>
                </div>
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Dolore</div>
                </div>
                <div class="sticky-jump-nav__item">
                    <div role="button" class="sticky-jump-nav__link" href="#">Dolore Reprehenderit</div>
                </div>
            </div>
        </nav>
    </div>
</div>
 
<div class="sticky-jump-nav{{modifierClasses|lspace}}">
  <div class="sticky-jump-nav__inner">
    <nav class="sticky-jump-nav__nav">
      <div class="sticky-jump-nav__list">
        {% for link in links -%}
        <div class="sticky-jump-nav__item">
          <div role="button" class="sticky-jump-nav__link" href="{{link.href}}">{{link.label}}</div>
        </div>
        {%- endfor %}
      </div>
    </nav>
  </div>
</div>
 
{
  "links": [
    {
      "href": "#",
      "label": "Excepteur ut"
    },
    {
      "href": "#",
      "label": "Reprehenderit dolor id"
    },
    {
      "href": "#",
      "label": "Minim ea Labore"
    },
    {
      "href": "#",
      "label": "Cillum Fugiat"
    },
    {
      "href": "#",
      "label": "Dolore"
    },
    {
      "href": "#",
      "label": "Dolore Reprehenderit"
    }
  ]
}
  • Content: 
    $(function () {
  const $stickyJumpNav = $('.sticky-jump-nav')
  
  if ($stickyJumpNav.length) {

    const navDistanceTop = $stickyJumpNav.offset().top

    if (window.matchMedia('(max-width: 991px)').matches) {
      $('.sticky-jump-nav__link').on('click touch', e => e.preventDefault())
      
      const $stickyJumpCarousel = $('.sticky-jump-nav__list').slick({
        accessibility: false,
        arrows: false,
        infinite: false,
        mobileFirst: true,
        centerMode: true,
        touchMove: false,
        centerPadding: '0px',
        focusOnSelect: true,
        variableWidth: true,
      })

      // $(window).on('load resize scroll', () => {
      //   $.each($('.scrollspy'), (i, el) => {
      //     const id = $(el).attr('id')
      //     const anchor = `#${id}`
      //     const scroll = window.scrollspy[anchor]
      //     if (window.scrollY >= (scroll.top - 5) && window.scrollY <= (scroll.bot - 5)) {
      //       $stickyJumpCarousel.slick('slickGoTo', $(`[href="${anchor}"]`).parent().data('slick-index'))
      //     }
      //   })
      // })
    }

    $(window).on('load resize scroll', () => {
      if (window.scrollY >= navDistanceTop) {
        $stickyJumpNav.addClass('sticky-jump-nav--is-scrolled')
      } else {
        $stickyJumpNav.removeClass('sticky-jump-nav--is-scrolled')
      }
    })
  }
})
  • URL: /components/raw/sticky-jump-nav/sticky-jump-nav.js
  • Filesystem Path: source/patterns/molecules/sticky-jump-nav/sticky-jump-nav.js
  • Size: 1.4 KB
  • Content: 
    .sticky-jump-nav {
  $this: &;

  background: transparent;
  display: block;
  position: sticky;
  top: 0;
  transition: all 250ms linear;
  z-index: 999;

  .slick-track {
    display: flex !important;
  }

  &__inner {
    @include media-lg-up {
      @include container;
    }
  }

  &__list {
    @include media-lg-up {
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
  }

  &__item {
    height: rem(48px);
    display: flex !important;
    align-items: flex-end;
    justify-content: stretch;

    &.scrollspy--active {
      #{$this}__link {
        color: $color-primary-red;
        font-weight: 600;
      }
    }
  }

  &__link {
    @extend .px-16;
    @extend .py-4;
    background: $color-white;
    border-radius: rem(8px) rem(8px) 0 0;
    color: $color-primary-blue;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: rem(40px);
    margin-inline: rem(2px);
    text-decoration: none;
    transition: height 250ms linear;
    white-space: nowrap;

    &:hover,
    &:focus {
      color: $color-primary-red;
      height: rem(48px);
    }
  }

  &--is-scrolled {

    background: $color-sky-light;
    border-bottom: rem(1px) solid $color-sky;
    padding-block: rem(4px);

    #{$this}__item {
      height: rem(30px);
    }

    #{$this}__link {
      background: transparent;
      height: rem(30px);
      margin-inline: 0;
    }
  }
}
  • URL: /components/raw/sticky-jump-nav/sticky-jump-nav.scss
  • Filesystem Path: source/patterns/molecules/sticky-jump-nav/sticky-jump-nav.scss
  • Size: 1.5 KB

No notes defined.