Hintergrund nicht für Elternelement der Position fest div

Question

Ich versuche eine einfache sticky header mit Position behoben property.The Problem, das ich angetroffen habe ist, Hintergrund CSS-Eigenschaft gilt nicht für das Elternelement des festen div? was falsch mache ich hier?

hier ist der Code:

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> 

Sie können ein klebriges Feature sehen, wenn Sie nach oben, aber die Sache ist nur klebrig CSS bewirbt, aber ich will „stickybg“ Element Hintergrund Eigenschaft sollte auch mit klebrigem Menü bewegen, wenn Sie hochscrollen? wie es geht?

JSFIDDLE

Answer 1

Sie müssen Header immer festgelegt werden.

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

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