Question

我正在尝试将徽标滚动到右侧，最终将其设置为汉堡包图标。这大致是我的最终目标，但是在页面加载而不是滚动时完成。 https://codepen.io/mthauv/pen/gxJNWq

我开始试图让徽标走到正确的位置。我遇到的问题是它只有在你仔细滚动时才有效。如果你滚得太快，它会变得太远或不够远，具体取决于线路......

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

或者语句允许它滚动得太远，而且语句允许它停止短路。我已经尝试了一些其他声明，但大多数都阻止徽标在向下滚动时返回。

这是笔https://codepen.io/mthauv/pen/aygNbe

HTML

 <body>

  <div id="logo-container" class="first-step">
   <div id="m-container" onclick="toggleMenu('menu-btn')">
    <div id="m-1" class="m"></div>
    <div id="m-2" class="m"></div>
    <div id="m-3" class="m"></div>
  </div>
 </div>

 <div id="menu-container">
   <ul id="menu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
 </div>

 <div id="content-container" onclick="toggleMenu('body')">
   <h1>Content</h1>
 </div>

</body>

和JS

var logoContainer = document.getElementById('logo-container');
var mContainer = document.getElementById('m-container');
var menuContainer = document.getElementById('menu-container');
var contentContainer = document.getElementById('content-container');
var m = document.getElementsByClassName('m');

var w = window.innerWidth;
var check = mContainer.style.right.replace(/[^\d.-]/g, '');
var startLine = w/2 - 90;
var totalDistance = window.innerWidth/2;
var target = window.innerWidth - 16;

mContainer.style.right = w/2 - 90 + "px"

window.addEventListener("resize", function(){
  var w = window.innerWidth;
  mContainer.style.right = w/2 - 90 + "px"
  check = mContainer.style.right.replace(/[^\d.-]/g, '');
  startLine = w/2 - 90;
  totalDistance = w/2;
  target = w - 16;
});

window.addEventListener('scroll', function(e){
  var scrollY = (window.pageYOffset) ;
  var x = scrollY/240;

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

  });

Answer 1

检查出来：

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();

https://codepen.io/Gibala/pen/gxNJRR

Answer 2

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

我添加了以下代码，用于检查容器的权利是否正在离开屏幕，如果是，则将其锚定而不是继续。

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

https://codepen.io/anon/pen/LjKoNE

在滚动

2 个答案: