jquery - 如何防止页眉在窗口滚动时停止跳转

Question

我有一个固定的标题，这让我在过去 4 个小时的谷歌搜索中头疼不已，一旦页面开始加载，它就会从右跳到左。如何防止这种情况并在链接点击时固定标题。这是我的 CSS:

<div id="main-header" style="border: none; width: 100%; margin: auto; top: 0; z-index: 100; background-color: #9A430B;"> 
  the links are here...  
  </div>

提前致谢

这是让它保持在顶部的脚本，...

 <script>
 $(document).ready(function() {

var div = $('#main-header');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(div).css('position',((p)>start) ? 'fixed' : 'static');
    $(div).css('top',((p)>start) ? '0px' : '');
  });

});
 </script>

但是链接在点击、页面加载时会从右向左略微跳动，...

Answer 1

试试这个 Demo css 样式进行更改。如果您希望标题保持在固定位置，即使用户滚动页面，我已经给出了 position:fixed。

您的标题可能会因为图层而跳跃。也就是说，您的 header 必须位于您的 html 结构之上，因为它们出现在 .我不知道你是否想要任何固定的标题。但是，如果您不想固定它，则无需指定任何位置，只需给出

width:100%;
z-index:5; //just a higher value than 1

注意:除非必要，否则不要设置floating 或position:absolute。此外，您不需要 JavaScript 来为您的标题设置样式，它可以轻松地使用 CSS 进行维护，没有任何复杂性。希望我对这个回复很清楚。