Скрывать прокручиваемый контент за прозрачными фиксированными позициями div при прокрутке страницы? - PullRequest
Новая
       22

Скрывать прокручиваемый контент за прозрачными фиксированными позициями div при прокрутке страницы?

16 голосов
/ 30 июня 2011

У меня есть div с именем header, который настроен на фиксированную позицию. Проблема в том, что при прокрутке страницы содержимое страницы отображается за заголовком (заголовок прозрачный).

Я знаю много о css, но не могу понять это. Я пытался установить переполнение на скрытый, но я знал, что это не сработает (и не сработало).

Это очень сложно объяснить, поэтому я сделал все, что мог.

HTML: 

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

CSS: 

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

Вот скриншот проблемы:

enter image description here

Ответы [ 7 ]

15 голосов
/ 16 мая 2012

Просто опаздываю, но в случае, если кто-то еще столкнется с этим в будущем, вот ваше исправление.

Ваш код CSS: 

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

Ваш HTML: 

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

Это предоставит вам заголовок, который точно соответствует вашему сайту и всплывает вверху.Основное содержимое будет прокручиваться без заголовка и исчезнет при прохождении заголовка.Ваша .bottom-wrapper padding-top должна быть высотой содержимого вашего заголовка.

Cheers!

7 голосов
/ 30 июня 2011

Вы, наверное, ищете z-index. Это позволяет вам указывать вертикальный порядок элементов на странице, поэтому элемент с z-index: 10 плавает над (визуально) элементом с z-index: 5.

Дайте содержание z-index: 5 и посмотрите, работает ли оно.

5 голосов
/ 27 апреля 2012

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

HTML 

<div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

CSS 

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

Это даетЯ выгляжу как изображение полной страницы с прозрачным фиксированным заголовком, а когда содержимое тела прокручивается, оно прячется за заголовком.Изображения выглядят бесшовными.

Вы можете сделать то же самое с однотонным фоном, хотя, возможно, это было бы проще.

2 примечания: заголовок имеет заданную высоту, ятестировали только в FF и Chrome.

1 голос
/ 30 июня 2011

Имеет ли #header заданную высоту? 

#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }

Я уверен, что в IE это не сработает ...

0 голосов
/ 17 июня 2017

Я думаю, что уже поздно отвечать.Но позже, кто-то взглянет, это будет полезно.

Просто добавьте фон в класс заголовка

Вот код -> 

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:999;
    background-color:#FFFFFF;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
   
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
    z-index:1;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}
<!DOCTYPE html>
<html>


<body>

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>
</body>
</html>
0 голосов
/ 17 ноября 2016
  1. У меня исправлено фоновое изображение
  2. Фон заголовка прозрачный
  3. Я не хочу, чтобы мой контент переопределял мой прозрачный заголовок

Я нашел решение, прокручивающее div вместо тела: 

<div>
    <div class="header"></div>
    <div class="content"></div>
</div>


.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
0 голосов
/ 06 сентября 2013

Исправить положение содержимого div ниже заголовка + переполнение-y содержимого содержимого.

...