Question

我对编码非常陌生，现在我正在开展一项小型学校作业，其目的是创建一个服务网站。

当我滚动页面时，我想从侧面做一个有着鼻子的脸 - 从左到右 - （就像Pinocchio一样）。

也许我写的代码将有助于更准确地解释我想要做的事情......

我的问题是：我应该怎样做才能让我的鼻子元素固定在左侧，并且在滚动时越来越多地向右移动？当我将位置设置为固定时，我的鼻子元素消失了。

这是我的灵感/代码来源 - ＆gt; http://jsfiddle.net/95EtZ/11/

这是我的代码：

$(function() {
  var Node = $('#container'),
    BaseWidth = Node.width();

  $(window).resize(function() {
    $('#container').css({
      top: ($(window).height() - $('#container').outerHeight()) / 2
    });
  });

  $(window).resize();

  var $scrollingDiv = Node;

  $(window).scroll(function() {
    var winScrollTop = $(window).scrollTop() + 0,
      zeroSizeHeight = $(document).height() - $(window).height(),
      newSize = BaseWidth * (1 - (winScrollTop / zeroSizeHeight) * (2 / 3));

    Node.css({
      width: newSize,
      "marginTop": winScrollTop + "px"
    });
  });
});

#added {
  background: white;
  height: 1500px;
  overflow: hidden;
  position: relative;
}

#container {
  width: 600px;
  height: 100px;
  background-color: #567;
  margin: 0 auto;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div id="added">
    <div id="container"></div>
  </div>
</body>

</html>

Answer 1

只需让div向左浮动就可以了。

#container {
  width: 600px;
  height: 2000px;
  background-color: #567;
  margin: 0 auto;
  position:relative;
  float:left;    
}

如何在滚动时更改元素宽度？

1 个答案: