Question

我想在滚动上旋转div 当我向下滚动页面的25％时，我希望元素旋转90 *，当我滚动页面的50％时，我希望它旋转180 *，依此类推。

有人建议我使用jQueryRotat.js，我把它全部填入JSfiddle，但是我无法让它工作。您可以查看我已有的内容：JSFiddle

这是我到目前为止所得到的

HTML：

<div class="site_wrapper">
    <div class="logo">
        <h1>Logo</h1>
    </div>
</div

CSS：

.site_wrapper{
    max-width:200px;
    height:10000px;
    margin:auto;
    background:#555;
}

.logo{
    width:150px;
    height:150px;
    margin-left:-75px;
    border-radius:50%;
    background:url(http://www.gielesdesign.nl/imgs/textures/texture-1.jpg);
    position:fixed;
    top:50px;
    left:50%;
    text-align:center;
}

Answer 1

您没有定义windowHeight，也没有onscroll事件集

$(document).ready(function(){
   var bodyHeight = $("body").height()-$(window).height();
   window.onscroll = function() {

      //Determine the amount to rotate by.
      var deg = -window.scrollY*(360/bodyHeight);

      $(".logo").css({
        "transform": "rotate("+deg+"deg)",
      });

   };
});

并且根据Blazemonger的建议，从页面高度中减去窗口高度，以便在页面末尾获得完整的旋转。

JSFiddle

Answer 2

我为您（使用可选的缓存）

制作fiddle

使用

$(window).scroll(function(){});

Answer 3

您需要将功能附加到$(document).scroll()，我还认为您希望使用$(document)代替$(window)来获取页面高度。这是一个有效的jsfiddle

Answer 4

您的代码存在一些问题。首先，只要使用$(window).on('scroll')事件滚动窗口，就需要触发它。

其次，windowheight不是代码中的变量。我用$(window).height()替换它，但后来确定它实际上没有必要并完全删除该测试。

最后，我更新了您的.rotate参数。初始angle应该是元素的当前角度，通过调用.getRotateAngle()方法获得。可以通过将当前scrollTop除以整个文档的高度，减去窗口高度 - 然后将其乘以-180来计算终端角度（介于0和180度之间）。

最终结果是在您向上和向下滚动页面时平滑旋转的徽标。

$(window).on('scroll', function () {
        $(".logo").rotate({
            duration: 1, /* why wait? No easing needed now, either */
            angle: $('.logo').getRotateAngle(),
            animateTo: -180 * $(window).scrollTop() / ($(document).height() - $(window).height())
        });
});

http://jsfiddle.net/mblase75/nqm2w/

如何在滚动百分比上用jquery旋转html元素？

4 个答案: