javascript - Jquery - 在滚动到 50% 时将 DIV 旋转 X 度

Question

好的，所以这应该很容易，我已经完成了一半，但 sleep 不足让我难以掌握这一切的基本数学知识。

一旦滚动点达到 50%，我就需要开始旋转一个 DIV - '.thumb' DIV 需要从它的 CSS 起点开始，然后在 50% 的滚动点开始旋转，本质上模拟一个“拇指”向上”从屏幕的一半向下。然后向上滚动会反向重置拇指。

两个问题:

• 如何让那个大坝旋转“.thumb”旋转到站立位置？
• 到目前为止对代码有什么建议吗，它会不会太贵了？

示例代码和 Fiddle:

$(window).scroll(function() {
  var wintop = $(window).scrollTop(),
      docheight = $('article').height(),
      winheight = $(window).height(),
      totalScroll = (wintop/(docheight-winheight)) * 100,
      progressBar = $('.progress-bar');

  // Note: too expensive polling??
  if (totalScroll >= 50) {
    // This bit is a mess and I can't figure it out yo.
    // Start rotating from 0 to 100 (or from 90deg t 0deg??)
    var rotate = (wintop / docheight) * 180;

    $('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
  }
  progressBar.css('width', totalScroll + '%');
});

https://jsfiddle.net/keazyj6f/2/

一如既往的感谢，感谢所有中肯的建议

Answer 1

这是问题 https://jsfiddle.net/keazyj6f/5/ 前半部分的解决方案

$(window).scroll(function() {
  var wintop = $(window).scrollTop(),
      docheight = $('article').height(),
      winheight = $(window).height(),
      totalScroll = (wintop/(docheight-winheight)) * 100,
      progressBar = $('.progress-bar');

  // Note: too expensive polling??
  if (totalScroll >= 50) {
      // This bit is fucked and I can't figure it out yo.
      // Start rotating from 0 to 100 (or from 90deg t 0deg??)
      var rotate = (wintop / (docheight-winheight)) * 180;
      $('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
  } else {
  	 $('.progress-thumb .thumb').css({ transform: 'rotate(0deg)'});
  }	

  progressBar.css('width', totalScroll + '%');
});

article {
  position: relative;
  height: 4000px;
  width: 100%;

  &:after {
    content: '50% Start rotating thumb';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 2px;
    background: #000;
  }
}
.container-progress {
  left:0;
  width: 100%;
  height: 25px;
  margin-bottom: 0px;
  position: fixed;
  top: 50px;
  /*overflow: hidden;*/
  background-color: white;
  content: "";
  display: table;
  table-layout: fixed;

  .progress-bar {
    position: relative;
    width: 0%;
    float: left;
    height: 100%;
    z-index:99;
    max-width: 100%;
    background-color: #009dff;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
     
    .progress-thumb {
      display: block;
      position: absolute;
      right: 0px;
      top: -28px;

      width: 60px;
      height: 60px;

      background-color: blue;

     .thumb {
        display: block;
        position: absolute;
        left: 24px;
        top: 15px;

        width: 50px;
        height: 20px;

        transform-origin: center center;

        background-color: red;
      }
    }
  }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-progress">
    <div class="progress-bar">
        <div class="progress-thumb">
            <div class="thumb"></div>
        </div>
    </div>
</div>

<article></article>

希望这能解决您问题的第一部分。我将研究下一部分。

你错过了从 docheight 中减去 winheight var rotate = (wintop/(docheight-winheight)) * 180;