Html 如何制作粘性标题？

我试图制作一个粘性导航栏，这样当我向下滚动时，我希望我的徽标、搜索栏、登录按钮和导航栏也向下滚动

问题是，当我向下滚动时，我的徽标和导航栏会出现在幻灯片的后面；它们不显示，而且也是透明的。我已经花了两天的时间在这上面了，但是我想不出来

分区标题{ 位置：固定； 背景色：黑色； } / 计算机辅助设计 瑞士法郎 欧元 英镑 美元 或 搜索 搜索

---

在看到您的实时代码后，我添加了以下内容并对其进行了测试：

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

---

检查这把小提琴。HTML中有几个问题，比如包装DIV没有关闭。首先尝试修复HTML，然后添加CSS以分别定位粘性div

HTML:

在这把小提琴中玩：

代码片段并不包含所有资源，而且很难理解使用导航栏的环境。这是一个重要的细节，对开发人员非常有用

今天，我没有时间继续了。我计划更新我的答案，或者其他开发人员将从我离开的地方继续

我的解决方案是：

注:

已经使用了粘性导航，在大屏幕上显示，但仅用于菜单元素。我认为要求是使整个导航条粘滞。 b只有大屏幕桌面才需要解决方案，这会使整个导航系统变粘

1克隆当前HTML导航结构，并将其附加在原始导航之后/之前。如果没有这个，在原始导航被粘贴位置：固定后，内容将向上移动。 2滚动一定距离后，使用粘性规则向原始导航添加CSS类。样式UXI将减小某些元素的大小，以便留下更多可见的空间。 3显示可见性：隐藏克隆的导航结构

当前代码：

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

---

你能从JSFIDLE给我看一下吗。你的代码片段不起作用。你试试z-index吗？@JonDeWitt我用position fixedHi@marie你可以看看@Marian07谢谢999是为了确保没有其他z-index元素在z-index中领先。1是可以的，但是如果另一个div也有1，那么您将得到一个重叠。使用999Hey@marie是安全的。你能把你的代码放在一把空小提琴里分享吗？伟大的我已经编辑了我的答案。我已经在你的网站上测试了我的解决方案，它100%有效。干杯@marie@B谢谢你，哥们，但我还是有同样的问题，它藏了我一半的屁股。说实话，你的要求不是很清楚。你能创建一个你想看到的画面吗？你认为最终结果如何？

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
}

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