div位置固定重新大小的行为

Question

我的网站上有固定菜单，没有任何问题。我有一个容器（不是引导程序），当与静态菜单联系时，它将被修复。一切都按预期工作，除非我重新调整窗口大小，容器进入0顶部的绝对位置。风格或任何内容都没有明确提及，因为它仍然有position:fixed，但我看到的是这个。我在stackoverflow和其他资源中尝试了与此问题相关的大部分问题，但没有给我一个满意的答案。有帮助吗？感谢。

＆＃13;

＆＃13;

$.fn.extend({
   scrollTabs: function() {
     var pageTop = parseFloat($(window).scrollTop());
     if (elementTop < pageTop + 66) {
       $(this).css({
         'position': 'fixed',
         'top': '66px',
         'left': '0',
         'right': '0',
         'z-index': '9999',
         'background': '#ffffff',
         'width': '100%',
         'padding': '20px 0',
         'margin-top': '0'
       });

       $(this).find('#product-tabs').css({
         'max-width': '1300px',
         'margin-left': 'auto',
         'margin-right': 'auto'
       });

     } else {
       $(this).css({
         'position': 'initial',
         'margin-top': '-' + elementHeight + 'px'
       });
     }
   }
 });

 $(window).load(function() {
   var scrollElement = $('.box-additional.box-tabs.grid12-12');
   elementTop = parseFloat($(scrollElement).offset().top);

   var overflowHeight = parseFloat($(window).height()) - 200;

   $('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
   var scrollElement = $('#firstElement');
   elementHeight = parseFloat($(scrollElement).outerHeight());
   var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
   var newElement = $('#newElement');
   $(scrollElement).css('visibility', 'hidden');
   $(newElement).css('margin-top', '-' + elementHeight + 'px');
   $(scrollElement).after(newElement);
   $(window).scroll(function() {
     $(newElement).scrollTabs();
   });
 });

 $(window).resize(function() {
   var scrollElement = $('#firstElement');
   elementTop = parseFloat($(scrollElement).offset().top);
   elementHeight = parseFloat($(scrollElement).outerHeight());
   var newElement = $('#newElement');
   $(newElement).css('margin-top', '-' + elementHeight + 'px');
   $(window).scroll(function() {
     $(newElement).scrollTabs();
   });
 });

＆＃13;

.header-container {
  background-color: #000;
  position: fixed;
  width: 100%;
  z-index: 99999;
  color: #fff;
}
.grid12-12 {
  display: inline;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  font-size: 50px;
}
.page-content {
  min-height: 1000px;
  float: left;
  font-size: 72px;
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="header-container" id="top">
  this is my menu
</div>

<div class="page-content">
  this is my page content
<div>

<div class="box-additional box-tabs grid12-12">
  this is my container
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

jQuery（newElement）.css（＆＃39; margin-top ＆＃39;，＆＃39; - ＆＃39; + elementHeight +＆＃39; px＆＃39;） ;

到

jQuery（newElement）.css（＆＃39; 顶部＆＃39;，＆＃39; - ＆＃39; + elementHeight +＆＃39; px＆＃39;）; < / p>