You could consider using CSS clip: rect(top, right, bottom, left);
to clip a fixed positioned element to a parent. See demo at http://jsfiddle.net/lmeurs/jf3t0fmf/.
Beware, use with care!
Though the clip style is widely supported, main disadvantages are that:
- The parent's position cannot be static or relative (one can use an absolutely positioned parent inside a relatively positioned container);
- The rect coordinates do not support percentages, though the
auto
value equals 100%
, ie. clip: rect(auto, auto, auto, auto);
;
- Possibillities with child elements are limited in at least IE11 & Chrome34, ie. we cannot set the position of child elements to relative or absolute or use CSS3 transform like scale.
See http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ for more info.
EDIT: Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility, so just to be sure we added:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
to the main child element.
Also note that it's not fully supported by older / mobile browsers or it might take some extra effort. See our implementation for the menu at bellafuchsia.com.
- IE8 shows the menu well, but menu links are not clickable;
- IE9 does not show the menu under the fold;
- iOS Safari <5 does not show the menu well;
- iOS Safari 5+ repaints the clipped content on scroll after scrolling;
- FF (at least 13+), IE10+, Chrome and Chrome for Android seem to play nice.
EDIT 2014-11-02: Demo URL has been updated.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…