当 CSS Sticky 页脚栏浮动时如何隐藏某些对象答案

【问题标题】：How to make certain objects hidden when CSS Sticky footer bar floats over当 CSS Sticky 页脚栏浮动时如何隐藏某些对象
【发布时间】：2015-04-30 18:28:50
【问题描述】：

我有一个从 CSS 引导程序中获取的略微透明的粘性页脚，我想知道如何使各种 CSS 选择器中的特定属性具有使它们 opacity=0 或相似的值（即，使它们被隐藏) 当透明的粘性页脚浮在上面时。

是否有经过试验和测试的方法...？也许是一个javascript方法......？我可能在想我们可以选择sticky-bar类：

.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>&#169;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：

Sticky Footer: jsFiddle

【问题讨论】：

你能发布一个你使用的粘性页脚的例子，可能是一个jsfiddle；粘性页脚实际上不允许元素通过它？
我不确定你想要什么，你只是想把页脚放在其他所有标记之上吗？如果是这样，您只需要设置 z-index。
@PierreArlaud 好吧，从 css 中不透明度设置为 0.9，这很好，因为图像在下面淡出，但我在某些 div 上有一些水平线，这些看起来一点也不好看。我想知道我是否可以选择在粘性条浮动时隐藏特定的 div...看看我添加的边框 divot 看看我的意思。
@NenadP 看看：jsfiddle.net/michealjroberts/89papu02
@MichaelRoberts 我在您的小提琴中看不到任何水平线或任何类似问题。能否添加一些以便我们查看实际问题？

标签： javascript html css twitter-bootstrap sticky-footer

【解决方案1】：

您可以尝试在粘性栏下方添加一个不透明图层。这样，深度介于两者之间的物体将是透明的，而下方的物体将是不可见的。请注意，元素必须是 position: relative 才能位于不透明布局之上。

检查这个sn-p：

.border {
  border: 1px solid #000000;
  height: 3000px;
}
img {
  position: relative;
  z-index: 150;
}
.sticky-background {
    z-index: 100;
    height: 99px;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
}
.sticky-bar {
  z-index: 200;
  bottom: 0;
  color: #D3D3D3;
  font-weight: 300;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 1.0;
  position: fixed;
  width: 100%;
}
.sticky-bar-inner {
  opacity: 0.9;
  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;
}

<img src="http://www.ndaccess.com/sample/Images/Image1.jpg" style="margin-top: 100px;"/>
<div class="border"></div>

<!-- Footer -->
<div class="sticky-background"></div>
<div class="sticky-bar">
  <div class="sticky-bar-inner">
    <p>&#169;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>

【讨论】：