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

Question

I have a mildly transparent sticky footer that I've taken from CSS bootstrap and I was wondering how to make specific properties within various css selectors have values that make them opacity=0 or similar, (ie, so that they are hidden) when the transparent sticky footer floats over.

Is there a tried and tested method for this...? Perhaps a javascript method...? I was perhaps thinking we could select the sticky-bar class:

.sticky-bar {}

And then implement what classes it can hide when over, hypothetically "something" like:

.sticky-bar: over {
  hide: .class_1, .class_2;
}

I'm just not sure on the variables or if such variables even exist!

If someone could point me in the right direction or give me a started for 10 that would be much appreciated.

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

Here is my jsfiddle of my stick footer thus far:

Sticky Footer: jsFiddle

Answer 1

You could try to add an opaque layer under the sticky bar. That way, objects with a depth between the two will be transparent, and those under will be invisible. Please note that elements need to be position: relative to be over the opaque layout.

Check this snippet:

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