статической верхней навигации с содержанием скрывается за ним на свитке

Question

Вот скрипку, как к тому, что я пытаюсь сделать: http://jsfiddle.net/60h84j7u/

Я хочу копию, чтобы скрыть ниже верхнего нав дел. Я могу выполнить это, если фон установлен на нечто иное, чем прозрачное, но в этом случае фон для верхнего навигатора должен быть прозрачным.

HTML

<div class="wrapper"> 
    <div class="top-nav">This needs to be at top</div> 

    <div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div> 
</div> 

CSS

.wrapper { 
    width: 500px; 
    height: 200px; 
    /*border: 1px solid purple;*/ 
} 
.top-nav { 
    position: fixed; 
    top: 0; 
    border: 1px solid red; 
    background: transparent; 
} 

.copy { 
    position: relative; 
    top: 40px; 
    border: 1px solid green; 
    overflow: hidden; 
} 

Answer 1

Я считаю, что это будет невозможно, если вы хотите, чтобы полоса прокрутки, чтобы быть на краю браузера, если вы не измените свое решение дизайна чтобы сделать прозрачный верхний слой прозрачным и сделать что-то еще, например, добавить фоновый цвет или фоновое изображение, отображающее то же самое.

Если вы добавили 2 фиксированных контейнера * вокруг прокручиваемой части вашей страницы, установите их высоту на что-то < 100% и расположите их под верхней навигацией, вы можете установить внешний контейнер, чтобы скрыть переполнение, и установить внутреннюю контейнер для прокрутки по оси y. Это не дает больших результатов.

<div class="wrapper"> 
    <div class="top-nav">This needs to be at top</div> 

    <div id="outercontainer"> 
     <div id="innercontainer"> 
      <div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div> 
     </div> 
    </div> 
</div> 

с CSS:

.outercontainer { 
    position: fixed; 
    top: 40px; 
    height: 90%; 
    width: 100%; 
    overflow: hidden; 
} 

.innercontainer { 
    position: fixed; 
    height: 90%; 
    width: 100%; 
    overflow-y: scroll; 
} 

* протестирован в Internet Explorer 11. Может страшно сломать что-нибудь еще в