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'）;