背景不申请位置固定div的父元素答案

【问题标题】：Background not applying for parent element of position fixed div背景不申请位置固定div的父元素
【发布时间】：2016-06-30 05:20:45
【问题描述】：

我正在尝试一个简单的带有位置固定属性的粘性标题。我遇到的问题是，背景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

【问题讨论】：

演示在哪里？
Something like this?
no..请添加 jquery 库并检查一次。我不知道添加小提琴
这是您的代码的 jsfiddle，您到底想更改什么？ jsfiddle.net/szvhapa5
是的..你可以注意到，我希望具有背景属性的父 div "stickybg" 与 "sticky" div 一起移动，但是如何？

标签： jquery html css

【解决方案1】：

您需要始终修复标题。

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

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

【讨论】：