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

Question

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

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

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

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

这是我的灵感来源/代码 - > 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 个解决方案

解决方案1
0 2017-04-30 21:33:56

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

问题描述

1 个解决方案

解决方案1 0 2017-04-30 21:33:56

解决方案1
0 2017-04-30 21:33:56