将元素固定到顶部时的问题答案

【问题标题】：issue when fixing element to top将元素固定到顶部时的问题
【发布时间】：2014-01-08 16:22:57
【问题描述】：

我正在向我的朋友网站添加一些新功能，该网站已经建成。他希望在用户滚动到顶部时立即将一个位于标题下方的 div 锁定到屏幕上。我创建了下面的函数，它工作得很好，但是一旦 jquery 将元素放置在固定位置，它下面的所有元素都会向上滑动，导致整个站点“跳跃”。有没有办法在不将所有这些元素放在绝对位置的情况下防止这种情况发生？这个网站非常复杂，需要花费大量时间来重做所有这些元素。

jQuery(function($) {
    function lockelem() {

        if ($(window).scrollTop() > 786) 
          $('.tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '-200px', 'width': '100%'}); 
        else
          $('.tabs').css({'position': 'relative', 'top': 'auto'});
        }

   $(window).scroll(lockelem);
   lockelem();
});

任何建议将不胜感激！

【问题讨论】：

标签： jquery css css-position fixed absolute

【解决方案1】：

前面的答案几乎是正确的。它不会完全起作用，因为 else 语句不会及时隐藏占位符 div。你需要这个：

function lockelem() {
    if ($(window).scrollTop() > $('#tabs').position().top ) {
          $('#tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '0', 'width': '100%'});
        $("#tabPlaceholder").show();
    }
    if ($(window).scrollTop() < $('#tabPlaceholder').position().top ) {
          $('#tabs').css({'position': 'relative', 'top': 'auto'});
          $('#tabPlaceholder').hide();
    }   
}
lockelem();
$(window).scroll(lockelem);

工作小提琴，您可能需要调整窗口大小以使其足够小以显示其工作：http://jsfiddle.net/rlouie/j7hsX/

【讨论】：

【解决方案2】：

我的网站也遇到了同样的问题。我找到的最简单的解决方案是直接在它之前创建一个“spacer”div。

当主 div 处于流动状态时（位置：静态/相对），分隔 div 被隐藏。一旦主 div 流出（固定），我会显示间隔 div。这是一些代码：

jQuery(function($) {
function lockelem() {

    if ($(window).scrollTop() > 786) 
      $('.tabs').css({'z-index': '10000', 'position': 'fixed', 'top': '-200px', 'width': '100%'}); 
      //Here we show the Spacer and set its height (just in case you don't know the height of the div before runtime
      $('.tabsSpacer').css({height:$('.tabsSpacer').next().height()+'px'}).show();
    else
      $('.tabs').css({'position': 'relative', 'top': 'auto'});
      //hide the spacer
      $('.tabsSpacer').hide();
    }

   $(window).scroll(lockelem);
   lockelem();
});

如果您不想给它自己的类或其他任何东西，您可以直接将其称为主 div 之前的元素，并使用.prev()。实际实现取决于您，但这是我找到的通用解决方案。

在不知道你的实际 html 结构是什么的情况下，它可能看起来像这样：

<div class="tabsSpacer" style="display:none;"></div>
<div class="tabs">...</div>

【讨论】：

【解决方案3】：

具有绝对或固定位置的元素总是会从文档流中删除，这会导致跳转。我发现解决这个问题的最可靠方法是复制元素并将副本用作固定标题。这比使用垫片或在某处添加额外的填充物或任何有可能偏离一点的东西要好。这样一来，您的原始内容根本没有机会移动，因为您从未真正接触过原始内容。

顺便说一句，我还发现在 CSS 中保留样式并让 JS 添加或删除类是一种更简洁的操作方式。它为我节省了很多头痛。

您可以在此处查看粘性标题的一般示例：http://jsfiddle.net/8SB5Z/

对于您的代码，我会这样做：

jQuery(function($) {

   // Clone the header
   $('.tabs').clone().addClass('clone').insertAfter('.tabs');

   // Add or remove the 'visible' class on the clone as needed
   function lockelem() {
       if ( $(window).scrollTop() > 786 ) {
          $('.tabs.clone').addClass('visible');
       } else {
          $('.tabs.clone').removeClass('visible');
       }
   }

   // Check the positioning on scroll
   $(window).scroll(lockelem);
   lockelem();
});

CSS

.tabs.clone {
   z-index: 10000;
   position: fixed;
   top: 0;
   width: 100%;
   display:none;
}
.tabs.clone.visible {
   display:block;
}

【讨论】：