Javascript / jQuery元素在重新加载页面之前不起作用

Question

I've got a strange problem where the javascript/jQuery on my homepage is only working after I reload the page. Both the floating menu and smooth scroll fail to work as expected. The problem can be replicated by forcing the browser to get a new version of the page (ie, Ctrl+F5).

I include the code below. The first bit is the floating menu, and the second is the smooth scroll.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function UpdateTableHeaders() {
   $(".persist-area").each(function() {

       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", '100%')
         .addClass("floatingHeader");

   });

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});
</script>

<script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[id=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 40
            }, 1000);
            return false;
          }
        }
      });
    });
</script>

I have a sneaking suspicion that the problem might be a change I made to the floating menu where I set the width to 100% rather than finding the parent width (which then gave a width in pixels) because the element was full width anyway, and when the page is viewed on a mobile the floating menu wasn't updating to the new width when the device orientation changed.

If that is the problem, is there a better way to update the width of the menu on orientation change instead?

I know that's quite a lot to go on there!

Answer 1

OK, I think I might of solved it.

Where I commented // DOM ready I didn't actually wrap it in a $( document ).ready(function() function. I have now, and it seems to have solved the problem.

Schoolboy error 101!