page scroll and scrollTop.md

source

The problem is not the transform. If you try logging the scrollTop value you'll see that firefox always returns 0, that's because ff has the scroll attached to the html, not the body. Here's a cross browser solution:

http://jsfiddle.net/jonigiuro/kDSqB/9/

var $cog = $('#cog'),
    $body = $('body'),
    bodyHeight = $body.height();

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

$(window).scroll(function () {
    var scroll = getScrollTop();
    $cog.css({
        'transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-webkit-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-moz-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-ms-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-o-transform:rotate': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)'
    });
});

$cog = $('#cog')
$body = $('body')
bodyHeight = $body.height()

getScrollTop = ->
  if typeof pageYOffset != 'undefined'
    #most browsers except IE before #9
    pageYOffset
  else
    B = document.body
    #IE 'quirks'
    D = document.documentElement
    #IE with doctype
    D = if D.clientHeight then D else B
    D.scrollTop

$(window).scroll ->
  scroll = getScrollTop()
  $cog.css
    'transform': 'rotate(' + scroll / bodyHeight * 360 + 'deg)'
    '-webkit-transform': 'rotate(' + scroll / bodyHeight * 360 + 'deg)'
    '-moz-transform': 'rotate(' + scroll / bodyHeight * 360 + 'deg)'
    '-ms-transform': 'rotate(' + scroll / bodyHeight * 360 + 'deg)'
    '-o-tran