时间戳

首页 > 解决方案 > 如何制作一个粘性标题？

html - 如何制作一个粘性标题？

问题描述

我正在尝试制作一个粘性导航栏，这样当我向下滚动时，我想要我的徽标、我的搜索栏、登录按钮和我的导航栏也向下滚动。

问题是当我向下滚动时，我的徽标和导航栏会出现在幻灯片后面；他们不显示，他们也是透明的。我现在正在研究它2天，但无法弄清楚。

div#shopify-section-header {
  position: fixed;
  background-color: black;
}
<div id="shopify-section-header" class="shopify-section header-section">

  <header class="site-header" role="banner" data-section-id="header" data-section-type="header-section">
    <div class="wrapper">
      <div class="grid--full">
        <div class="grid-item large--one-half">
          <h1 class="header-logo" itemscope="" itemtype="http://schema.org/Organization">
            <a href="/" itemprop="url">
              <img src="//cdn.shopify.com/s/files/_tagline_bpng?v=1512661427" srcset="//tagline_black_whitebkg_250x.png?v=1512661427 1x, //cdn.shopify.com/s/files/1/2045/6673/files/Ctagline_black_whitebkg_250x@2x.png?v=1512661427 2x"
                alt="test" itemprop="logo">
            </a>
          </h1>

          <div class="clearfix"></div>
          <a class="contact-header-logo" href="/pages/contact-us">Contact Us</a>
        </div>

        <div class="grid-item large--one-half text-center large--text-right">
          <div class="site-header--text-links medium-down--hide">
            <div id="ly-languages-switcher">
              <a href="#" id="ly40221" class="ly-languages-switcher-link current_lang">English</a>
              <span>/</span>
              <a href="#" id="ly40222" class="ly-languages-switcher-link">Français</a>
            </div>

            <div class="currencyRobo medium-down--hide">
              <div class="currencyRoboSelect">
                <select class="currencyRoboSelectBox" name="currencyRoboSelect">
                  <option value="CAD">CAD</option>
                  <option value="CHF">CHF</option>
                  <option value="EUR">EUR</option>
                  <option value="GBP">GBP</option>
                  <option value="USD">USD</option>
                </select>
              </div>
            </div>

            <span class="site-header--meta-links medium-down--hide">
              <a href="/account/login" id="customer_login_link">Sign in</a>
              <span class="site-header--spacer">or</span>
            <a href="/account/register" id="customer_register_link">Create an Account</a>
            </span>

          </div>

          <br class="medium-down--hide">

          <form action="/pages/search-results" method="get" class="search-bar" role="search">
            <input type="hidden" name="type" value="product">
            <input type="search" name="q" value="" placeholder="Search all products..." aria-label="Search all products..." class="stop-mega-menu-reinit" autocomplete="OfF" id="_ispbxii_0" autocorrect="off" autocapitalize="off">
            <button type="submit" class="search-bar--submit icon-fallback-text">
              <span class="icon icon-search" aria-hidden="true"></span>
              <span class="fallback-text">Search</span>
            </button>
          </form>

          <a href="/cart" class="header-cart-btn">
            <span class="icon icon-cart"></span> Cart <span class="cart-count cart-badge--desktop hidden-count">0</span>
          </a>
        </div>
      </div>
    </div>
  </header>

  <nav class="nav-bar sticky-header" role="navigation">
    <div class="wrapper">
      <form action="/pages/search-results" method="get" class="search-bar" role="search">
        <input type="hidden" name="type" value="product">
        <input type="search" name="q" value="" placeholder="Search all products..." aria-label="Search all products..." class="stop-mega-menu-reinit" autocomplete="OfF" id="_ispbxii_1" autocorrect="off" autocapitalize="off">
        <button type="submit" class="search-bar--submit icon-fallback-text">
          <span class="icon icon-search" aria-hidden="true"></span>
          <span class="fallback-text">Search</span>
        </button>
      </form>
    </div>
  </nav>

</div>

标签： htmlcss

解决方案

不包含所有资源，code snippet很难理解使用的环境navbar。这是一个重要的细节，对开发人员非常有用。

今天，我已经没有时间继续说下去了。我计划更新我的答案，或者其他开发人员可能会从我离开的地方继续。

我的解决方法是：

备注：

a) 已使用粘性导航，在大屏幕上显示但仅用于菜单元素。我认为要求是使整个导航栏保持粘性。
b) 仅针对大屏幕（台式机）需要解决方案，使整个导航具有粘性

1)克隆当前 HTML 导航结构并将其附加在原始导航之后/之前。没有这个，原来的nav被sticky( position: fixed)后，内容会往上走。
2）滚动一定距离后，在带有粘性规则CSS class的原始文件中添加一个。nav（#style #UX）我会减小某些元素的大小以留出更多可见空间。
3)显示( visibility : hidden) 克隆的导航结构。

当前代码：

.sticky-header-structure-on #shopify-section-header{
    position : absolute;
}

.sticky-header-structure-on #shopify-section-header {
    position : fixed;
    width    : 100%;
    z-index  : 1;
    top      : 0;
}

/* Reset previous class for sticy menu element */
.sticky-header-structure-on #shopify-section-header .nav-bar.sticky-header,
.sticky-header-structure-on #shopify-section-header-clone .nav-bar.sticky-header{
  position : static;
  width    : auto;
}

#shopify-section-header-clone {
    display    : block!important;
    visibility : hidden;
}



var $body                             = $("body"),
    $sectionHeader        = $("#shopify-section-header"),
    $sectionHeaderClone   = $sectionHeader.clone(),
    $navBar                           = $sectionHeader.find(".nav-bar");

$sectionHeaderClone.css("display", "none");
$sectionHeaderClone.attr("id", "shopify-section-header-clone");
$sectionHeaderClone.insertAfter( $sectionHeader );

$(window).on("scroll", function() {
  debugger;

  // Only for medium and large screens - when the large meniu is active
  // As in the CSS @media
  if( window.innerWidth <= 768 ) {
     return;
  }


  if( $navBar.hasClass("sticky-header")  ) {
    $body.addClass("sticky-header-structure-on");
  } else {
    $body.removeClass("sticky-header-structure-on");
  }
});

推荐阅读