我有一个带有横幅 (.banner
) 和 float 元素 (.float
) 的页面。
当用户在 View 中滚动横幅时,我希望 .float
相对于横幅出现(垂直居中),但是当用户滚动经过横幅时,它会粘在屏幕。
实际上, float 的位置始终是固定的
,我正在使用 Javascript 更改变换值以将其定位在滚动时我想要的位置。
它几乎按我想要的方式工作,但我希望元素在位置之间“滑动”,但我无法让这种行为按我想要的方式工作。如果没有 CSS 过渡,它会跳跃。使用 CSS 过渡,它会滑动,但是当我向上滚动时,它会滑动到横幅的垂直中心上方太远;一旦您向上滚动回到横幅,我希望它感觉像是“粘”在横幅上。
感谢任何帮助。 JSFiddle 在这里:http://jsfiddle.net/L452xf7h/12/
HTML:
<div class="container">
<div class="banner"></div>
<div class="float">Floating Element</div>
</div>
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:
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';
}
最佳答案
这是您要寻找的结果吗?
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>
关于javascript - 出现 'relative'和 'fixed'之间的元素变换过渡不平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53520260/