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

Question

我遇到了一个奇怪的问题，我的主页上的 javascript/jQuery 仅在重新加载页面后才起作用。 float 菜单和平滑滚动都无法按预期工作。通过强制浏览器获取新版本的页面(即 Ctrl+F5)可以重现该问题。

我包含以下代码。第一个是 float 菜单，第二个是平滑滚动。

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

我偷偷怀疑问题可能是我对 float 菜单所做的更改，其中我将宽度设置为 100%，而不是查找父宽度(然后给出以像素为单位的宽度)，因为该元素是全宽度无论如何，当在移动设备上查看页面时，设备方向更改时 float 菜单不会更新为新宽度。

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

我知道还有很多事情要做!

Answer 1

好吧，我想我可以解决这个问题。

在我评论 //DOM Ready 的地方，我实际上并没有将其包装在 $( document ).ready(function() 函数中。我现在已经，并且看来问题已经解决了。

小学生错误101!