Question

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() {          

      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.

EDIT: One thing that seems to make it consistent, is what barlas suggested – adding a left attribute to the fixed element. However, this breaks the thing altogether as it is then fixed on the x-axis and stays put even when the browser is resized, etc. This doesn’t work for me, I simply need it to stick to the y-axis by adding a top attribute. For some reason doing this results in different behavior from Chrome (where it appears as it should) and Firefox (where it appears far to the right of where it should).

Confused.

RESOLVED: Okay, I’ve figured this out.

For some reason, Firefox and Chrome seem to treat fixed elements differently. The way I’ve made the result consistent is to add an absolutely positioned container element for the fixed element (I’ve used media queries to ensure this element is only absolutely positioned above 960px, since the site is responsive).

This makes the sticky fixed-position element behave the same way in both browsers. So more of a CSS problem than a jQuery one.

Answer 1

i edited my answer, try to position left ur sticky element

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

      var windowTop = $(this).scrollTop(); // change to this here
      var width = $(window).width();
      var height = $(window).height();

      var positionEle = (width - 960 ) / 2 + 220;  // 220 is ur stick part's width

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