javascript - 如何在 CSS Sticky 页脚栏 float 时隐藏某些对象

Question

我有一个从 CSS bootstrap 中获取的稍微透明的粘性页脚，我想知道如何使各种 css 选择器中的特定属性具有使它们不透明 = 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>

到目前为止，这是我的 stick 页脚的 jsfiddle:

Sticky Footer: jsFiddle

Answer 1

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

检查这个片段:

.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>