Question

我想要完成的是在用户滚动超过一定数量的像素后，从左侧显示div。然后，当它通过另一个点时，它向右移动并再次消失。然后，如果用户向上滚动以使div反转其移动。

我遇到的问题是，当div移动到右侧时，它会扩展视图，而不像它在左侧时那样。我已经尝试将左值更改为正确的值，但我尝试过没有任何效果。

这是我到目前为止jQuery的代码：

window.addEventListener('scroll', function() {
  if (window.scrollY <= 50) {
    $('#leftinfo').animate({left: '-150%'});
  }
  else if (window.scrollY >= 50 && window.scrollY <= 200){
    $('#leftinfo').animate({left: '25%'}, 'swing');
  } 
  else if (window.scrollY >= 200) {
    $('#leftinfo').animate({left: '100%'}, 'swing');
  }
});

我还有一个JS Bin的链接。这是http://jsbin.com/hadabe/7/edit?css,js,output

Answer 1

首先，同一对象上的jQuery动画按先到先得的顺序排队并执行。您需要先调用.stop()来清除动画队列，以便新动画立即执行。

其次，为防止窗口扩展可滚动区域，您需要指示您的html主体隐藏溢出其边界的元素，但仅限于x轴。

＆＃13;

window.addEventListener('scroll', function() {
  if (window.scrollY <= 50) {
    console.log("phase I");
    $('#leftinfo').stop().animate({
      left: '-150%'
    });
  } else if (window.scrollY >= 50 && window.scrollY <= 200) {
    console.log("phase II");
    $('#leftinfo').stop().animate({
      left: '25%'
    }, 'swing');
  } else if (window.scrollY >= 200) {
    console.log("phase III");
    $('#leftinfo').stop().animate({
      left: '100%'
    }, 'swing');
  }
});

＆＃13;

body {
  margin: 0;
  height: 75rem;
  width: auto;
  float: right;
  display: inline-block;
  overflow-x: hidden;
}
.frontintro {
  border: 1px solid black;
  background-color: #FFFFFF;
  padding: 1rem;
  display: inline-block;
  color: #000000;
  border-radius: 15px;
}
#leftinfo {
  position: absolute;
  top: 15rem;
  width: 65%;
  z-index: 100;
  left: -150%;
}
#leftinfo p {
  font-size: 2rem;
  text-align: center;
}
#rightinfo {
  float: right;
  position: relative;
  margin: 5rem;
  width: 35%;
}
#rightinfo p {
  font-size: 1.5rem;
  text-align: center;
}
#first {
  background: #c6bea6;
  background-size: cover;
  color: white;
  height: 52rem;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 300;
}
#second {
  background: #9e9e9e;
  background-size: cover;
  color: white;
  height: 800px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 200;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-content">
  <div id="first">
    <div class="frontintro" id="leftinfo">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim.</p>
    </div>
    <!-- End of .frontintro & leftinfo -->
  </div>
  <!-- End of #first -->
  <div id="second">
    <div class="frontintro" id="rightinfo">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim. Praesent pellentesque sagittis lacinia. Pellentesque tincidunt diam at turpis tincidunt egestas.</p>
    </div>
    <!-- End of .frontintro & .rightinfo -->
  </div>
  <!-- End of #second -->
</div>

＆＃13;

Answer 2

将此添加到您的CSS：

#main-content {
   overflow-x:hidden;
}

这会阻止您的父div动态调整大小以适应其子级。

您可以在此处详细了解overflow属性： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 3

您可以尝试使用此代码。

window.addEventListener('scroll', function() {
  var offset = $('#first').offset();
  var height = $('#first').height();
  var computed = parseInt((offset.top + height) / (height / 2));
  if (window.scrollY < computed) {
     $('#leftinfo').stop().animate({left: '-150%'});
  } else if (window.scrollY >= computed && window.scrollY < parseInt((offset.top + height) / 2)) {
     $('#leftinfo').stop().animate({left: '25%'}, 'swing');
  } else if (window.scrollY >= parseInt((offset.top + height) / 2)) {
     $('#leftinfo').stop().animate({left: '100%'}, 'swing');
  }
});

使用Jquery根据window.scrollY移动基于.scroll的div

3 个答案: