Component Library

Ropbar related 

<div class="topbar-related" id="js-topbar-related">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h5 class="topbar-related__title">Related content/header: </h5>
                <nav class="nav-main" role="navigation" vocab="http://schema.org/" typeof="SiteNavigationElement">
                    <ul class="nav-main-list">
                        <li class="nav-main-list__item ">
                            <a href="#" title="Home" target="" class="link   " property="url">Home</a>

                        </li>
                        <li class="nav-main-list__item nav-main-list__item--active">
                            <a href="#" title="Get started" target="" class="link true  " property="url">Get started</a>

                        </li>
                        <li class="nav-main-list__item ">
                            <a href="#" title="About" target="" class="link   " property="url">About</a>

                        </li>
                        <li class="nav-main-list__item ">
                            <a href="#" title="Contact" target="" class="link   " property="url">Contact</a>

                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</div>
 
<div class="topbar-related" id="js-topbar-related">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h5 class="topbar-related__title">Related content/header: </h5>
                {{ render '@nav-main-list' navList }}
            </div>
        </div>
    </div>
</div>
 
{
  "navList": {
    "list": [
      {
        "url": "#",
        "text": "Home",
        "title": "Home"
      },
      {
        "active": true,
        "url": "#",
        "text": "Get started",
        "title": "Get started"
      },
      {
        "url": "#",
        "text": "About",
        "title": "About"
      },
      {
        "url": "#",
        "text": "Contact",
        "title": "Contact"
      }
    ]
  }
}
  • Content: 
    /*
 * Module: Topbar related
 */

:root {
    --customEasing: var(--easeInOutCubic);
}

.topbar-related {
    display: none;

    @media (--viewport-md-min) {
        display: block;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(-150%);
        will-change: transform;
        z-index: 11;
        transition: transform 0.5s var(--customEasing);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        padding-top: 15px;
        padding-bottom: 15px;
    }

    &__title {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    &.sticky {
        transform: translateY(0);
    }
}
  • URL: /components/raw/topbar-related/topbar-related.css
  • Filesystem Path: src/03-organisms/topbar/topbar-related/topbar-related.css
  • Size: 707 Bytes
  • Content: 
    if (document.querySelector('#js-topbar-related')) {
  window.addEventListener(
    'scroll',
    () => {
      fixedRelatedTopbar('js-topbar-related', 'sticky', '.js-header', 25);
    },
    false,
  );
}

function fixedRelatedTopbar(elementID, className, headerClass, offset) {
  // Get the current scroll position
  const scroll = window.pageYOffset !== undefined ? window.pageYOffset
    : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  const headerHeight = document.querySelector(headerClass).offsetHeight;
  const el = document.getElementById(elementID);

  if (scroll >= headerHeight + offset) {
    el.classList.add(className);
  }
  if (scroll < headerHeight + offset) {
    el.classList.remove(className);
  }
}
  • URL: /components/raw/topbar-related/topbar-related.js
  • Filesystem Path: src/03-organisms/topbar/topbar-related/topbar-related.js
  • Size: 759 Bytes

There are no notes for this item.