Jquery - 旋转DIV在X轴上的50％

好吧，所以这应该很容易，我在那里的一半，但睡眠不足让我苦苦挣扎与它的基本数学。Jquery - 旋转DIV在X轴上的50％

我需要在滚动点位于50％时开始旋转DIV - '.thumb'DIV需要从CSS开始点开始，然后在50％的滚动点开始旋转，本质上模拟“竖起大拇指“从屏幕的一半。然后向上滚动重置拇指。

两个问题：

我如何获得该坝 '旋转' .thumb旋转到站立姿势？
迄今为止关于代码的任何建议是否会过于昂贵？

示例代码&小提琴：

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

感谢一如既往，感谢所有中肯的意见

来源

2017-08-09 Danny

在这里你去与问题的上半场的解决方案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 { 
 
    \t $('.progress-thumb .thumb').css({ transform: 'rotate(0deg)'}); 
 
    } \t 
 

 
    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>

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

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

来源

2017-08-09 06:51:54 Shiladitya

嘿，伙计，这是非常接近。它以一个随机角度开始初始轮换（50％标记），而不是我期望的平稳“大拇指”，但给了我足够的基础上更新的数学前进。干杯。 – Danny

您是否正在从0％或50％标记看到一个平滑的“竖起大拇指”？ – Shiladitya

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)' }); 
    }

希望它可以帮助减去winheight。

来源

2017-08-09 06:54:54

Jquery - 旋转DIV在X轴上的50％

回答

相关问题