Javascript 尝试在滚动时设置动画和元素

我试图使一个标志滚动到右边，并最终成为一个汉堡图标动画。这大致是我的最终目标，但在页面加载时完成，而不是滚动

我开始尝试让标志去它的正确位置。我遇到的问题是，只有当你仔细滚动时，它才能工作。如果你滚动太快，它要么走得太远，要么不够远，这取决于行

 if( target - mContainer.getBoundingClientRect().right > 0 || startLine - startLine * scrollY/240 > 16 ){
   mContainer.style.right = startLine - startLine * scrollY/240 + "px";
   check = mContainer.style.right.replace(/[^\d.-]/g, '');   
 }

Or语句允许它在and语句允许它短停的地方滚动太远。我尝试过其他一些语句，但大多数都会在向下滚动时阻止徽标返回

这是钢笔

HTML

---

检查这只更新过的笔，我将M子对象的位置设置为绝对，将父对象设置为固定，以便它可以自由移动

我添加了下面的代码，用于检查容器的右侧是否离开屏幕，如果是，请锚定它，而不是继续

  if (parseFloat(mContainer.style.right) <= 0) {
    mContainer.style.right = '0px';
  }

if（parseFloat（mContainer.style.right）检查以下内容：

const mContainer = document.getElementById("m-container");

const scrollFinishPosition = 300; // when animation should be finished
const step = scrollFinishPosition / 100;

let startPosition;
let endPosition;
let difference;

function calcSize() {
  const logoWidth = mContainer.offsetWidth; // get width of the logo

  startPosition = window.innerWidth / 2 - logoWidth / 2; // center

  const margin = 80;
  endPosition = window.innerWidth - logoWidth - margin; 

  // used for some simple math later 
  difference = endPosition - startPosition; 
}

function positionLogo() {
  let percentageValue;

  // if scroll position is in animation range - calc % otherwise just use 100%
  if (window.pageYOffset < scrollFinishPosition) {
    percentageValue = pageYOffset / step;
  } else {
    percentageValue = 100;
  }

  // convert % to px and add update styles
  const position = startPosition + difference / 100 * percentageValue;
  mContainer.style.left = position + "px";
}

window.addEventListener("resize", function(e) {
  calcSize();
  positionLogo()
});

window.addEventListener("scroll", function(e) {
  positionLogo();
});

calcSize();
positionLogo();

constmcontainer=document.getElementById（“m-container”）；
const scrollFinishPosition=300；//应在何时完成动画
常数步长=滚动完成位置/100；
让我们开始定位；
让结束位置；
让差异；
函数calcSize（）{
const logoWidth=mContainer.offsetWidth；//获取徽标的宽度
startPosition=window.innerWidth/2-logoWidth/2；//居中
常数裕度=80；
endPosition=window.innerWidth-logowWidth-边距；
//用于以后的一些简单数学
差异=结束位置-开始位置；
}
函数positionLogo（）{
让百分比值；
//如果滚动位置在动画范围内-计算%，否则使用100%
if（window.pageYOffset

这很有效！谢谢。我做了类似的事情，但我更喜欢你的。我使用了一个else-if语句…else-if（mContainer.getBoundingClientRect（）.right/w>1{mContainer.style.right='0'；}这很有效，比我拥有的要优雅得多。另外，它解决了这个问题（我还没有发现）一些滚动后的窗口大小调整。谢谢。
  if (parseFloat(mContainer.style.right) <= 0) {
    mContainer.style.right = '0px';
  }

const mContainer = document.getElementById("m-container");

const scrollFinishPosition = 300; // when animation should be finished
const step = scrollFinishPosition / 100;

let startPosition;
let endPosition;
let difference;

function calcSize() {
  const logoWidth = mContainer.offsetWidth; // get width of the logo

  startPosition = window.innerWidth / 2 - logoWidth / 2; // center

  const margin = 80;
  endPosition = window.innerWidth - logoWidth - margin; 

  // used for some simple math later 
  difference = endPosition - startPosition; 
}

function positionLogo() {
  let percentageValue;

  // if scroll position is in animation range - calc % otherwise just use 100%
  if (window.pageYOffset < scrollFinishPosition) {
    percentageValue = pageYOffset / step;
  } else {
    percentageValue = 100;
  }

  // convert % to px and add update styles
  const position = startPosition + difference / 100 * percentageValue;
  mContainer.style.left = position + "px";
}

window.addEventListener("resize", function(e) {
  calcSize();
  positionLogo()
});

window.addEventListener("scroll", function(e) {
  positionLogo();
});

calcSize();
positionLogo();