开发者

How to hide a floating div

Right now I have a floating box on the left side of my site that holds a stumble, facebook, twitter share code.

#fixmetoo {
    position: absolute;
    right: 30px;
    top: 0px;

}
#fixme { position: fixed; }

It stays put as you scroll but i want it to disappear if the footer is showing.

I have a page that is 960 px wide and the f开发者_JAVA百科loating box shows great but the footer is 100% wide and the box covers the footer.

so if my footer is 300px tall how can i hide the floating box IF i am less than 300 px from the bottom of the page?


Note that the z-index solution is probably what you want, but it will only work if the footer is a sibling element of the fixed-position panel (not exactly... just has to be in the same 'stacking context').

You probably however want to make the footer {position:relative; z-index:2;}, unless it is already absolutely positioned.

If you dislike the panel going behind the footer, the only sane way you can get the panel to stop scrolling before the footer is with javascript.


Try using the z-index property.

#footer{ position:absolute; z-index:2; }
#fixme{ z-index:1; }

Please post more of your code. Or use http://jsfiddle.net

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜