[英]Element transform transition between appearing 'relative' and 'fixed' not smooth
I have a page with a banner ( .banner
) and a floating element ( .float
). 我有一个带有横幅(
.banner
)和一个浮动元素( .float
)的页面。
When the user is scrolling with the banner in view, I want the .float
to appear relative to the banner (centred vertically), but when the user scrolls past the banner, it sticks to the screen. 当用户在查看横幅的情况下滚动时,我希望
.float
相对于横幅出现(垂直居中),但是当用户滚动经过横幅时,它会粘在屏幕上。
In reality, the position of float is always fixed
and I am using Javascript to change the transform value to position it where I want on scroll. 实际上,float的位置始终是
fixed
,我使用Javascript来更改转换值以将其定位在滚动位置上。
It's almost working as I want, but I want the element to 'slide' between positions and I can't get this behaviour to work as I want. 它几乎可以按我的方式工作,但是我希望元素在位置之间“滑动”,而我无法让这种行为按我的方式工作。 Without a CSS transition, it jumps.
如果没有CSS过渡,它会跳转。 With a CSS transition, it slides, but when I scroll back up it slides too far above the vertical center of the banner;
使用CSS过渡时,它会滑动,但是当我向上滚动时,它会滑到横幅垂直中心上方太远; I want it to feel like it 'sticks' to the banner once you have scrolled back up to the banner.
我希望它在滚动回横幅时感觉像“粘在”横幅上。
Any help appreciated. 任何帮助表示赞赏。 JSFiddle here: http://jsfiddle.net/L452xf7h/12/
JSFiddle在这里: http : //jsfiddle.net/L452xf7h/12/
HTML: HTML:
<div class="container">
<div class="banner"></div>
<div class="float">Floating Element</div>
</div>
CSS: CSS:
body, html {
margin: 0;
}
.container {
background: orange;
height: 2000px;
}
.banner {
width: 100%;
height: 400px;
background: white;
}
.float {
display: none;
width: 50px;
height: 50px;
background: red;
position: fixed;
top: 100px;
right: 100px;
/* this transition makes float travel high in banner when scrolling up */
/* transition: transform .3s linear; */
}
JS: JS:
var float = document.querySelector('.float');
if (float) {
// init position
onScroll();
// check on scroll
window.addEventListener('scroll', onScroll);
}
function onScroll() {
var banner_height = 400;
var float_topCss = 100;
var float_height = 50;
if (window.scrollY < banner_height) {
position = 0;
// center vertically in banner
position += banner_height / 2;
position -= float_height / 2;
// account for current scroll
position -= window.scrollY;
// minus difference of top css value
position -= float_topCss;
float.style.transform = "translate3d(0,"+position+"px,0)";
}
else {
float.style.transform = "translate3d(0,0,0)";
}
float.style.display = 'block';
}
Is this the result you are looking for? 这是您想要的结果吗?
var float = document.querySelector('.float'); if (float) { // init position onScroll(); // check on scroll window.addEventListener('scroll', onScroll); } function onScroll() { var banner_height = 400; if (window.scrollY < banner_height) { float.classList.remove('sticky'); } else { float.classList.add('sticky'); } }
body, html { margin: 0; } .container { background: orange; height: 2000px; position: relative; } .banner { width: 100%; height: 400px; background: white; } .float { display: inline-block; width: 50px; height: 50px; background: red; position: absolute; top: 100px; right: 100px; float: right; transition: transform .3s linear; } .float.sticky { top: -50px; transform: translateY(150px); position: sticky; }
<div class="container"> <div class="banner"></div> <div class="float">Floating Element</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.