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

Question

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

 $.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(); }); }); 

 .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; } 

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

Answer 1

jQuery（newElement）.css（' margin-top '，' - '+ elementHeight +'px'）;

至

jQuery（newElement）.css（' top '，' - '+ elementHeight +'px'）;