У меня есть прозрачно прозрачный липкий нижний колонтитул, который я взял из загрузочного буфера CSS, и мне было интересно, как сделать определенные свойства в пределах разных селекторов CSS, имеют значения, которые делают их непрозрачными = 0 или аналогичные (т. Е. Чтобы они были скрыты), когда прозрачный липкий нижний колонтитул плавает.Как сделать некоторые объекты скрытыми, когда CSS Липкая панель нижнего колонтитула плавает над
Есть ли проверенный метод для этого ...? Возможно, метод javascript ...? Я, возможно, думал, что мы могли бы выбрать класс липкий бар:
.sticky-bar {}
А затем реализовать какие классы можно скрыть при пролете гипотетически «что-то», как:
.sticky-bar: over {
hide: .class_1, .class_2;
}
Я просто не уверен, на переменные или если такие переменные существуют даже!
Если кто-то может указать мне в правильном направлении или дать мне начатое на 10, которое было бы высоко оценено.
.border {
border: 1px solid #000000;
height: 3000px;
}
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index: 99999;
}
.sticky-bar-inner {
margin: 0 auto;
text-align: center;
width: 100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin: 0 auto;
padding: 3px;
text-align: center;
width: 100%;
font-size: 11px;
}
#footerlist {
padding-left: 0;
}
#footerlist li {
display: inline;
list-style-type: none;
}<!-- Border -->
<div class="border"></div>
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project
<p>
<ul id="footerlist">
<li class="social">
<a href="https://twitter.com/astroboxio">
<img src="https://dl-web.dropbox.com/get/astroboxio_twitter_circle_black-512.png?_subject_uid=209608449&w=AABCg-2Bh2udLb-vzQz3ryyFfhfEAOtcU2apWFBOG6GHlw" height="42" width="42"></img>
</a>
</li>
<li class="social">
<a href="https://github.com/astroboxio">
<img src="https://dl-web.dropbox.com/get/astroboxio_github_circle_black-512.png?_subject_uid=209608449&w=AADU4Aqt57dkrlupJ1TDzuYpCkOf3OjCChT9l-M6m79fTQ" height="42" width="42"></img>
</a>
</li>
<li class="social">
<a href="#">
<img src="https://dl-web.dropbox.com/get/astroboxio_vimeo_circle_black-512.png?_subject_uid=209608449&w=AADDZg0zdYQML7E7v6eo4bJ4eku4VoV4HJgO9CgemmWIuA" height="42" width="42"></img>
</a>
</li>
</ul>
</div>
</div>Вот мой jsfiddle моей палочке колонтитула до сих пор:
Можете ли вы опубликовать пример липкой сноски вы используете, возможно, в jsfiddle; Липкий нижний колонтитул фактически не позволяет элементам проходить через него? – NenadP
Я не уверен, что вы хотите, вы только пытаетесь сделать нижний колонтитул поверх каждой другой разметки? Если это так, вам нужно только установить z-index. –
@PierreArlaud Ну, из css непрозрачность установлена в 0,9, что приятно, потому что изображения исчезают снизу, но у меня есть некоторые горизонтальные линии в некоторых div, и они не выглядят очень красиво. Мне было интересно, могу ли я выбрать конкретные divs, чтобы они были скрыты, когда липкий бар плавает ... взгляните на мой добавленный пограничный divot, что я имею в виду. –