如何制作粘性标头？

时间：2018-06-24 16:03:34

标签： html css

我正在尝试制作一个粘性导航栏，以便当我向下滚动时希望我的徽标，搜索栏，登录按钮以及导航栏也向下滚动。

问题是，当我向下滚动时，徽标和导航栏会在幻灯片后面；它们不显示，并且也是透明的。我现在已经处理了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>

3 个答案:

答案 0 :(得分：0)

检查此小提琴。 HTML中有几个问题，例如包装DIV未关闭。首先尝试修复HTML，然后添加CSS分别放置粘性DIV。

HTML：

<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">
      <h1 class="header-logo" itemscope="" itemtype="http://schema.org/Organization">
            <a href="/" itemprop="url">
              <img src="//cdn.shopify.com/s/files/_tagline_black_whitebkg_250x.png?v=1512661427" srcset="//cdn.shopify.com/s/files/1/2045/6673/files/Camomile_logo_tagline_black_whitebkg_250x.png?v=1512661427 1x, //cdn.shopify.com/s/files/1/2045/6673/files/Camomile_logo_tagline_black_whitebkg_250x@2x.png?v=1512661427 2x"
                alt="Camomile Beauty Always Cruelty free, Organic, Vegan and Safe skincare" itemprop="logo">
            </a>
          </h1>
    </div>
  </header>

  <nav class="nav-bar sticky-header" role="navigation">
    <div class="wrapper">
      This is also sticky
    </div>
  </nav>

  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nec tincidunt praesent semper feugiat nibh sed. A lacus vestibulum sed arcu non odio euismod lacinia. Tellus mauris a diam maecenas. At tempor commodo ullamcorper a lacus vestibulum sed. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Leo a diam sollicitudin tempor id eu nisl. Viverra mauris in aliquam sem fringilla ut morbi tincidunt. At ultrices mi tempus imperdiet nulla malesuada. Nullam eget felis eget nunc. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.

Massa tincidunt dui ut ornare lectus sit. Posuere urna nec tincidunt praesent semper. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Sapien et ligula ullamcorper malesuada proin libero. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nunc id cursus metus aliquam eleifend mi in nulla. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Tincidunt dui ut ornare lectus sit amet. Sagittis purus sit amet volutpat consequat mauris. Libero justo laoreet sit amet cursus sit amet dictum sit. Viverra adipiscing at in tellus. Lobortis scelerisque fermentum dui faucibus. Cum sociis natoque penatibus et magnis dis. Quisque sagittis purus sit amet volutpat. Aliquam sem et tortor consequat id. Pellentesque diam volutpat commodo sed egestas. Id semper risus in hendrerit gravida. Tincidunt dui ut ornare lectus sit. Non quam lacus suspendisse faucibus interdum posuere. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Et netus et malesuada fames ac turpis egestas. Amet porttitor eget dolor morbi non. Id neque aliquam vestibulum morbi blandit. Et malesuada fames ac turpis. Non curabitur gravida arcu ac tortor dignissim. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet consectetur adipiscing elit ut aliquam purus. Leo vel orci porta non. Aliquet nibh praesent tristique magna sit amet purus gravida. Laoreet non curabitur gravida arcu ac tortor. Aenean vel elit scelerisque mauris. Mauris augue neque gravida in fermentum et sollicitudin ac. Non sodales neque sodales ut etiam sit amet nisl. Vel facilisis volutpat est velit egestas dui id. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Non tellus orci ac auctor augue mauris. Scelerisque felis imperdiet proin fermentum leo vel. Faucibus et molestie ac feugiat. Proin sed libero enim sed faucibus turpis.

  </div>
</div>

CSS：

div#shopify-section-header .site-header {
  position: fixed;
  background-color: black;
  z-index:999;
  width:100%;
  top:0;
  left:0;
  height:100px;
}
div#shopify-section-header .site-header img{
  height:50px;
}
div#shopify-section-header .sticky-header{
  position:fixed;
  z-index:999;
  top:150px;
}
.content{
  margin-top:200px
}

玩这个小提琴：https://jsfiddle.net/sztkujb2/10/

答案 1 :(得分：0)

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

今天，我没有时间继续。我计划更新我的答案，否则其他开发人员可能会从我离开的地方继续。

我的解决方案是：

注释：

a）粘性导航已被使用，它在大屏幕上显示，但仅用于菜单元素。我认为要求是使整个导航栏保持粘性。
b）只有大屏幕（台式机）才需要解决方案，这会使整个导航系统变得很粘

1）克隆当前HTML导航结构，并将其附加在原始导航之后/之前。如果没有此设置，则在原始导航粘滞（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");
  }
});

答案 2 :(得分：-1)

看到您的实时代码后，我已经添加并测试了它：

div#shopify-section-header {
    position: fixed;
    width: 100%;
    display: block;
    z-index: 999;
}
相关问题
最新问题