我有一个获取问题#fixed with position:fixed关系到#container
检查这个小提琴：https://jsfiddle.net/a1zoghs0/2/
我知道，如果我把#fixed在外面#container,
它将有position:fixed。就像这个小提琴：https://jsfiddle.net/xc879rbm/1/
但不幸的是，我有一个问题，这种方法无法工作。是吗
可以把这个放进去#container并且仍然启用position:fixed关系到#container?
我的代码有什么问题吗？
提前致谢...
这是我的解决方案。我不太确定其中的所有数学细节，但它看起来对于调整窗口大小相当稳健。
主要技巧是将标题放置得足够远并使其足够大，以便视口的移动不会对其位置产生太大影响 - 想想天空中的月亮，它又大又远，因此你的头部的移动不影响其位置。
body{
margin:0; /* without it your container will not cover full body */
}
#container {
width:100vw; /* probably 100% would be ok here */
height:100vh; /* 100% would not be ok here,
as we need to center perspective viewport
w.r.t. screen- not w.r.t. whole long page content */
/* this makes math easier to me */
perspective:1px;
perspective-origin:0 0;
/* we want container to be a window through which you watch
the scrolling world */
overflow-y:scroll;
/* we don't want scrollbar at the bottom, as it would again force
us to use calc for perspective-origin-y.
Frankly, I do not know why the scrollbar appears at all */
overflow-x:hidden;
/* This is to allow positioning of layers relatively to container*/
position:relative;
}
.parallaxBase {
width:100%;
position:absolute;
top:200px;
}
.parallaxBack {
height:100vh;
/* The general formula to keep size intact is scale(perspective-z)
so in our case it is scale(1+1) */
transform:translateZ(-1px) scale(2);
transform-origin: 0 0;
}
#background {background:red; height:200px; padding-top:100px; }
#content {background:yellow; }
#fixed {background:green;
width:100%;
height:40px;
/* this is not so much to make it sticky,
it is rather to not push the parallaxBack div lower,
and to make sure that header is not occluded by elements
which have position:absolute like parallaxBase,
as even z-index:1 won't help you if you have position:static
*/
position:absolute;
top:0px;
z-index:1;
/* Now the main idea:
we push the navbar 1023px to the back, but at the same time,
we make it (1023+1) times bigger, which makes it appear in
original size.*/
transform: scale(1024) translateZ(-1023px);
transform-origin: 0 0;
}
<div id="container">
<div id="fixed">this is fixed // why not fixed?</div>
<div class="parallaxBack">
<div id="background"> this is parallax</div>
</div>
<div class="parallaxBase">
<div id="content">
this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
this is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is contentthis is content
</div>
</div>
</div>
You might want to play with it in
https://jsfiddle.net/7L8ndtuv/2/
我也推荐阅读https://developers.google.com/web/updates/2017/03/custom-scrollbar这启发了我的回答。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
