липкий заголовок на прокрутке с проблемами CSS

Question

Я создал липкий заголовок, который появляется, когда вы прокручиваете область навигации, и все работает отлично, за исключением того, что когда я настраиваю размер окна, липкий заголовок не настраивается автоматически, пока я перезагрузите страницу, даже если ширина равна 100%, и позиция зафиксирована. Каждый другой div настраивается автоматически, но не этот (возможно, из-за javascript, который клонирует его из стационарного заголовка?). Таким образом, ошибка, которую я не могу понять, как исправить, заключается в том, что .floatingHeader автоматически настраивается при изменении размера окна без перезагрузки. Любые идеи о том, как исправить эту небольшую эстетическую ошибку?

Мой HTML:

<div class="persist-area"> 
    <div class="top"> 
    <div class="persist-header"> 
     <div class="head"> 
      <div> 
       <div class="home active" onClick="location.href='index.html'"></div> 
       <a href="#">About</a><a href="#">Contact</a> 

       <div class="home right"></div><a href="#" id="right">News</a> 
      </div> 
      </div> 
    </div> 
    </div> 

CSS-:

.floatingHeader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: none; 
    z-index: 99999; 
} 

И Javascript:

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({ 
      "display": "block" 
      }); 
     } else { 
      floatingHeader.css({ 
      "display": "none" 
      });  
     }; 
    }); 
} 

// DOM Ready  
$(function() { 

    var clonedHeaderRow; 

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

    }); 

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

}); 

Answer 1

The DOM пожаров готов событий, когда браузер построил дерево DOM (так все элементы анализируются и помещаются в нужное место в дереве). Но в это время CSS не анализировался и не применялся к DOM. Поэтому, когда ваш JavaScript выполняется, браузер еще не применил width: 100% к .persist-header. Таким образом, jQuery просто возвращает фактическую ширину (в пикселях) элемента по умолчанию. И это значение - это то, что применяется к клонированному элементу.

Если вы ждете window.load, ваш код будет работать в соответствии с назначением. (Ну, часть клона с, я не могу сказать об остальных; ^)

Answer 2

Привет У меня была такая же проблема. Я обнаружил, что мне нужно «изменить размер» события JavaScript. Я добавил эту функцию, и это сработало для меня. Надеюсь, это поможет.

 $(document).ready(function() {   
     $(window).resize(function() { 
     $(".floatingHeader").css("width",$(".persist-header").width()); 
    }); 
});