跨浏览器兼容性

Question

On the new safari browser 6.0 on Lion 10.8 this code is not executing properly. Works fine in firefox and iPad safari. But on the mac it keeps vibrating as I scroll up and down. I'm trying to keep the top banner scrolling until the button reach the top of the page at which point i want the buttons to stay fixed.

here's the link to the page:

http://www.persiantunedpiano.com/Mirror/events.htm

here's the js:

<script type="text/javascript">
<![CDATA[

  $(document).scroll(function() {var scrollTop = $(window).scrollTop();
                        scroll(0, scrollTop);
                        if (scrollTop > 189) {
                            //alert(scrollTop);
                            $('#top_links').css('position', 'fixed');
                            $('#top_links').css('top', '0');
                            $('#left_links').css('position', 'fixed');
                            $('#left_links').css('top', '57px');


                        } else {
                            //alert('2');

                            $('#top_links').css('position','absolute');
                            $('#top_links').css('top', '186px');
                            $('#left_links').css('position', 'absolute');
                            $('#left_links').css('top', '242px');
                            //allertSize();
                        }
                        });


//]]>
</script>

Answer 1

Hmmm... seems like it is too slow, this will speed it up can't be sure it will be fast enough:

(I'm adding the jQuery elements to the closure so you don't have to search for them 4 times per move.)

<script type="text/javascript">

  var top_links = $('#top_links');
  var left_links = $('#left_links');

  $(document).scroll(function() {
     var scrollTop = $(window).scrollTop();
     scroll(0, scrollTop);
     if (scrollTop > 189) {
       top_links.css('position', 'fixed')
                .css('top', '0');
       left_links.css('position', 'fixed')
                 .css('top', '57px');
     }
     else {
       top_links.css('position','absolute')
                .css('top', '186px');
       left_links.css('position', 'absolute')
                 .css('top', '242px');
     }
 });
</script>