如何制作粘性標頭？

Question

我正在嘗試制作一個粘性導航欄，以便當我向下滾動時，我希望我的徽標，搜索欄，登錄按鈕以及導航欄也向下滾動。

問題是，當我向下滾動時，徽標和導航欄會進入幻燈片顯示的后面。 它們不顯示，並且也是透明的。 我正在處理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> 

Answer 1

檢查這個小提琴。 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/

Answer 2

該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");
  }
});

Answer 3

看完您的實時代碼后，我添加了此代碼並對其進行了測試：

div#shopify-section-header {
    position: fixed;
    width: 100%;
    display: block;
    z-index: 999;
}