JQuery - Sticky sidebar not working in Firefox

Posted by user1473358 on Stack Overflow See other posts from Stack Overflow or by user1473358
Published on 2012-06-25T14:52:31Z Indexed on 2012/06/25 15:16 UTC
Read the original article Hit count: 313

Filed under:
|
|
|
|

I'm working on a site with a Sticky sidebar (fixed position under certain conditions, etc) that is working fine in Chrome & Safari, but breaks in Firefox. I'm not sure what the issue is since I didn't write the script:

        $(document).ready(function() {
        /*
        var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear' 
        };
        */

        $().UItoTop({ easingType: 'easeOutQuart' });


      if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

        var stickyTop = $('.sticky').offset().top; // returns number 
        var newsTop = $('#news_single').offset().top; // returns number 


        $(window).scroll(function(){ // scroll event

          var windowTop = $(window).scrollTop(); // returns number 
          var width = $(window).width();
          var height = $(window).height();

          if (stickyTop < windowTop && width > 960 && height > 450){
            $('.sticky').css({ position: 'fixed', top: 40 });
            $('#news_single').css({ left: 230 });               
          }
          else {
            $('.sticky').css('position','static');
            $('#news_single').css({ left: 0 });             
          }

        });

      }         

    });

Here's the site (the sidebar in question is the one with the red header, to the left): http://www.parisgaa.org/parisgaels/this-is-a-heading-too-a-longer-one

I'd appreciate any help with this.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about position