jquery - 背景不申请位置固定div的父元素

Question

我正在尝试使用固定位置属性的简单粘性 header 。我遇到的问题是，背景 css 属性未申请固定 div 的父元素？我在这里做错了什么？

代码如下:

html:

  <div class="sticky_bg">
    <div class="container">
      <div class="sticky">

         <div class="logo">
              <img src="images/logo.png" alt="logo"/>
         </div>

 <div class="menu">
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Our Objectives</a></li>
       <li><a href="#">Our Services</a></li>
       <li><a href="#">Contact Us</a></li>
    </ul>
 </div>

</div>

CSS:

   <style>
   body{min-height:5000px;}
   .container{max-width:1170px;margin:0 auto;}
   header{width:100%;float:left;background:url("images/boat-bg.jpg")no-repeat center;background-size:cover;height:560px;}

 .sticky_bg{width:100%;float:left;background:#000;position:absolute;}
 .sticky {
     background: #444;
     position:fixed;
     width: 1170px;
     height: 80px;
     transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
     z-index:100;
   }

   .default {top: 0;}
   .fixed {top: -80px;}
  .logo{float:left;margin:25px 0 25px 1%;}
  .menu{float:right;margin:25px 1% 25px 0;}
  .menu ul li{list-style:none;float:left;}
  .menu ul li a{color:#fff; font-family: 'OpenSansSemibold';padding:0 15px;border-right:1px solid #fff;}
  .menu ul li:last-child {margin-right:0;}
  .menu ul li:last-child a{border-right:none;}

jQuery:

  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    (function($) {

     var ost = 0;

     $(window).scroll(function() {
        var cOst = $(this).scrollTop();

        if(cOst > ost) {
           $('.sticky').addClass('fixed').removeClass('default');
        }
     else {
          $('.sticky').addClass('default').removeClass('fixed');
         }

     ost = cOst;
     });

  })(jQuery);

 </script>

向上滚动后您可以看到一个粘性功能，但只有粘性 css 正在应用，但我希望具有背景属性的“stickybg”元素在您向上滚动时也应该随粘性菜单一起移动？怎么做？

JSFIDDLE

Answer 1

您需要始终修复 header 。

 .sticky_bg{
    width:100%;
    float:left;
    background:#000;
     position:fixed;
}

https://jsfiddle.net/szvhapa5/1/