位置固定標題不在我的網站上工作

Question

這是我的網站https://bed-sheet-2.myshopify.com/ ，添加了固定位置標頭css

.site-header{z-index:110;position:fixed;width:100%;left:0;}

它不能在我的網站上運行，如何解決這個問題。 我搜索stackoverflow，沒有解決。

Answer 1

試試這個： .site-header{z-index:110;position:fixed;top:0px;left:0px;width:100%;}你需要添加px和一個top值。

Answer 2

嘗試這個。 margin需要設置0px auto .site-header {width：100％; 保證金：0px auto; 位置：固定; 頂：0像素}

Answer 3

演示： https ： //codepen.io/Guilh/pen/JLKbn

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
        var  mn = $(".main-nav");
        mns = "main-nav-scrolled";
        hdr = $('header').height();

        $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(mns);
            } else {
            mn.removeClass(mns);
            }
        });
    </script>

.main-nav{
  position: relative;
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
header,.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

<nav class="main-nav">
  <a href="#">Nav Link 1</a>
  <a href="#">Nav Link 2</a>
  <a href="#">Nav Link 3</a>
  <a href="#">Nav Link 4</a>
</nav>