親の絶対にスティック固定

-1

私は興味深い問題があります。固定されたCSSプロパティの位置は、おそらくブラウザウィンドウに対して相対的です。しかし、どういうわけか、このコードではスクロールすると絶対的な親に固執します。方法と理由？親の絶対にスティック固定

HTML：

<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     <div class="bar">  
     </div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section> 
<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section>

CSS：

section { 
    width: 100%; 
    display: block; 
    max-width: none; 
    height: 100vh !important; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
} 

section .content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
} 

section .wrapper { 
    max-width: 770px; 
    margin: 0 auto 50px; 
    text-align: center; 
    padding: 0 25px 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.bar { 
    display: block; 
    width: 100%; 
    height: 30px; 
    background: #00aeef; 
    margin-bottom: 40px; 
} 

.bar.fixed { 
    position: fixed; 
    top: 0; 
}

のjQuery：

$(window).scroll(function() { 
    var scrollPos = $(document).scrollTop(); 
    if(scrollPos > $('.bar').offset().top) { 
     $('.bar').addClass('fixed'); 
    } else { 
    $('.bar').removeClass('fixed'); 
} 
}).scroll();

https://jsfiddle.net/bg6cqcfp/1/

出典

2016-06-20 Rcls

相対位置または絶対位置などに与えられた位置プロパティの固定位置は、親に対する相対位置です –

-1

まあ、プロパティがここに障害がある変換表示されます。