“Стирающий” position: fixed блок HTML

313

26 ноября 2016, 19:43

Привет всем. Возникла проблема с реализацией эффекта при верстке страницы. Эффект состоит в том, что сверху экрана находится линия на отступе, спозиционирована фиксированно (fixed), которая, фактически, является таким себе "ластиком". То бишь, на сайте есть блоки, в которых есть контент. Опускаясь вниз сайта, должен происходить эффект стирания этой линией именно контента. Например, есть желтый блок, в котором зеленый блок с текстом. При скролле вниз желтый блок, по сути, поднимается вверх, несмотря на линию, а зеленый "падает вниз" этого фиксированного div-а (над линией). Пример приложил. Там так же есть подобный эффект с картинкой. Но не могу понять, как сделать подобное, когда присутствует условная многослойность. То есть, я могу задать то же самое для блока .container, но тогда .block не стирается, тк он внутренний блок. Картинка одна, она просто поднимается за счёт z-index, а вот затереть блок контента, оставив внешний желтый блок не могу.

Заранее благодарю.

body { 
  margin: 0px; 
  padding: 0px; 
} 
.main { 
  background-color: #FF6600; 
  padding: 200px 0px 0px; 
} 
.fix { 
  position: fixed; 
  background-color: #FF6600; 
  border-bottom: 2px solid black; 
  height: 200px; 
  width: 100%; 
  top: 0px; 
  left: 0px; 
  z-index: 2; 
} 
.container { 
  padding: 50px; 
  background-color: yellow; 
} 
.block { 
  background-color: green; 
} 
.big_pic { 
  z-index: 2; 
  position: relative 
} 
.absolute { 
  position: absolute; 
  top: 70%; 
  z-index: 1; 
}

<div class="main"> 
  <div class="fix"> 
  </div> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu 
  sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut 
    arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p> 
 
  <div class="container"> 
    <div class="block"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque 
        ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus 
        at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse 
        facilisis ullamcorper molestie.</p> 
    </div> 
  </div> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu 
  sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar 
  semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.et sollicitudin purus 
  pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. 
  <img class="big_pic" src="http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/krasivye_cvety_rozy_kartinki_foto_05.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut 
  arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, 
  pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. et sollicitudin 
  purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. Nullam dui libero, gravida id dui ac, pellentesque gravida justo. Quisque id dolor non nunc scelerisque 
  varius a malesuada felis. Duis aliquam malesuada tortor, quis laoreet lacus vestibulum ut. Sed a vestibulum nunc, in maximus magna. Donec vel ante in nisi volutpat venenatis quis sit amet purus. Nunc eget posuere tortor. Donec in mi lectus. Mauris iaculis 
  aliquet orci, at condimentum ligula bibendum et. Cras egestas metus a pellentesque malesuada. Etiam et imperdiet arcu, nec gravida massa. Sed maximus, lorem a dignissim faucibus, lorem neque laoreet elit, ut scelerisque augue ex et odio. Suspendisse 
  ut pretium magna, sed elementum neque. Donec efficitur lectus vitae erat gravida fringilla et vel ante. Sed consectetur, odio vel venenatis mattis, nisl felis dapibus quam, eget ultrices augue nisi quis sapien. 
</div>