Question

我有一个奇怪的问题，我的主页上的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％，而不是找到父宽度（然后给出宽度，以像素为单位），因为元素是全宽无论如何，当在移动设备上查看页面时，浮动菜单在设备方向改变时没有更新到新的宽度。

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

我知道那里去了很多！

Answer 1

好的，我想我可能会解决它。

我评论// DOM ready的地方我实际上并没有将它包装在$( document ).ready(function()函数中。我现在有了，似乎已经解决了这个问题。

小学生错误101！

Javascript / jQuery元素在页面重新加载之前无法正常工作

1 个答案: