Question

我正在设置动画，以便当用户滚动时，在10px之后菜单消失到左边（到目前为止很容易）。我想它，所以菜单容器垂直显示“固定”，同时水平向左滚动。我已经想过，如果我创建一个循环，为每个px滚动添加1px的padding-bottom到容器，这将创建此效果（我不能使用position：fixed;因为这将阻止水平动画）。

我之前从未接触过这样的事情，虽然我意识到我需要某种形式的计数器来创建px值然后转换为paddingBottom值。

我已经设置了动画，因此它会在滚动时触发，但我似乎在如何逐步添加填充值方面绝对没有。

到目前为止，代码片段正在展示，但任何关于如何实现上述目标的指针都会令人惊叹。

艾米丽。

jQuery(document).ready (function($){

  $(window).scroll(function() {
 if ($(document).scrollTop() > 10) {
   $('.mydiv').css('left', '-100px');
 } else {
   $('.mydiv').css('left', '0px');
 }
 });

var divHeight = $('.mydiv').height(),
    scrollTop = $('.mydiv').scrollTop();

 for (i=0; i < scrollTop.length; i++) {

   var divPaddingBottom = 0;

 }
});

body {height: 200vh; padding: 0; margin: 0;}

.mydiv {
  position: absolute;
  width: 100px;
  height: 100vh;
  background-color: red;
  transition: .5s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv">
  </div>

Answer 1

我认为这就是你想要的：

jQuery(document).ready (function($){

  $(window).scroll(function() {
    $('.mydiv').css('paddingTop',  $(window).scrollTop() - $('.mydiv').offset().top);
    if ($(document).scrollTop() > 10) {
      $('.mydiv').css('left', '-100px');
    } else {
      $('.mydiv').css('left', '0px');
    }
  }).scroll();
  
});

body {height: 200vh; padding: 0; margin: 0;}

.mydiv {
  position: absolute;
  width: 100px;
  height: 100vh;
  background-color: red;
  transition: left .5s;
  transform:translateZ(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv">
  </div>

请注意，我仅将css过渡应用于left属性。我还包括transform：translateZ（0）;为了更好的表现。

为每1px滚动添加1px的填充（底部） - jQuery或Javascript

1 个答案: