Search code examples
jquerymootools

script changes div to fixed position - convert jquery solution to mootools


I need to have a div that is positioned in the middle of the screen on page load, and that scrolls with the rest of the screen, change to a fixed position when it hits the top of the screen. I found a solution for this written in jquery, but I need it in mootools. Can anyone help me with this?

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#right-column').offset().top;
  if (window_top > div_top)
    $('#contact').addClass('fixed')
  else
    $('#contact').removeClass('fixed');
}
 $(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

Solution

  • function sticky_relocate() {
        var window_top = $(window).getScroll().y;
        var div_top = $('right-column').getPosition().y;
    
        if (window_top > div_top)
            $('contact').addClass('fixed')
        else
            $('contact').removeClass('fixed');
    }
    
    $(window).addEvent('scroll', function(){
        sticky_relocate();
    });
    sticky_relocate();