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

我遇到了一个奇怪的问题，我的首页上的javascript / jQuery仅在重新加载页面后才能工作。浮动菜单和平滑滚动均无法按预期工作。可以通过强制浏览器获取页面的新版本（即Ctrl + F5）来复制该问题。

我包括以下代码。第一位是浮动菜单，第二位是平滑滚动。

<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>

我偷偷地怀疑问题可能是我对浮动菜单所做的更改，因为我将宽度设置为100％而不是找到父宽度（然后以像素为单位给出了宽度），因为元素无论如何都是全宽度，并且当在移动设备上查看页面时，当设备方向更改时，浮动菜单不会更新为新宽度。

如果这是问题所在，是否有更好的方法来更改方向更改菜单的宽度？

我知道那有很多事情要做！