Question

好的，所以这应该很容易，而且我已经到了一半但是睡眠不足让我在基础数学上苦苦挣扎。

我需要在滚动点达到50％时开始旋转DIV - ＆＃39; .thumb＆＃39; DIV需要从它的CSS起点开始，然后在50％的滚动点开始旋转，基本上模拟一个＆＃34;竖起大拇指＆＃34;从屏幕的一半。然后向上滚动以反向重置拇指。

两个问题：

如何让那个大坝旋转＆＃39; .thumb＆＃39;旋转到站立姿势？
到目前为止对代码的任何建议是否太贵了？

示例代码＆amp;小提琴：

$(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;

Answer 2

if (totalScroll >= 50) {

      var rotate = (wintop / docheight) *** 120;** // change the value from 180 - 120

      console.log('rotate: ', rotate);
      $('.progress-thumb .thumb').css({ transform: 'rotate(' + rotate + 'deg)' });
  }

希望它有所帮助。

Jquery - 在50％时在Scroll上旋转DIV X度

2 个答案: