出现“相对"和“固定"之间的元素变换过渡不平滑 [英] Element transform transition between appearing 'relative' and 'fixed' not smooth

问题描述

我有一个带有横幅 (.banner) 和浮动元素 (.float) 的页面.

当用户在视图中滚动横幅时，我希望 .float 相对于横幅出现(垂直居中)，但是当用户滚动经过横幅时，它会坚持屏幕.

实际上，float 的位置总是fixed，我使用Javascript 更改转换值以将其定位在我想要滚动的位置.

它几乎可以按我的意愿工作，但我希望元素在位置之间滑动"，但我无法让这种行为按我的意愿工作.没有 CSS 过渡，它会跳转.使用 CSS 过渡，它会滑动，但是当我向上滚动时，它会在横幅的垂直中心上方滑动太远；我希望在您向上滚动到横幅后，感觉它粘"在横幅上.

任何帮助表示赞赏.JSFiddle在这里:http://jsfiddle.net/L452xf7h/12/

HTML:

<div class="banner"></div><div class="float">浮动元素</div>

CSS:

body, html {边距:0；}.容器 {背景:橙色；高度:2000px；}.横幅 {宽度:100%；高度:400px；背景:白色；}.漂浮 {显示:无；宽度:50px；高度:50px；背景:红色；位置:固定；顶部:100px；右:100px；/* 当向上滚动时，这种转换使浮动在横幅中移动到高处 *//* 过渡:变换 .3s 线性；*/}

JS:

var float = document.querySelector('.float');如果(浮动){//初始位置onScroll();//检查滚动window.addEventListener('scroll', onScroll);}函数 onScroll() {var banner_height = 400;var float_topCss = 100;var float_height = 50;如果(window.scrollY 

解决方案

这是您要寻找的结果吗?

 var float = document.querySelector('.float');如果(浮动){//初始位置onScroll();//检查滚动window.addEventListener('scroll', onScroll);}函数 onScroll() {var banner_height = 400;如果(window.scrollY 

 body, html {边距:0；}.容器 {背景:橙色；高度:2000px；位置:相对；}.横幅 {宽度:100%；高度:400px；背景:白色；}.漂浮 {显示:内联块；宽度:50px；高度:50px；背景:红色；位置:绝对；顶部:100px；右:100px；浮动:对；过渡:变换 0.3s 线性；}.float.sticky {顶部:-50px；变换:translateY(150px);位置:粘性；}

<div class="容器"><div class="banner"></div><div class="float">浮动元素</div>

I have a page with a banner (.banner) and a floating element (.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.

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.

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. With a CSS transition, it slides, but when I scroll back up it slides too far above the vertical center of the banner; 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/

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';
}

解决方案

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>

这篇关于出现“相对"和“固定"之间的元素变换过渡不平滑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！