Question

我正在为已经建成的矿场网站的朋友添加一些新功能。他想要一个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();
});

任何建议都将不胜感激！

Answer 1

我的网站遇到了同样的问题。我发现最简单的解决方案是直接在它之前创建一个“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>

Answer 2

之前的答案几乎是正确的。它不会很有效，因为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/

Answer 3

具有绝对或固定位置的元素总是从文档流中删除，这会导致跳转。我发现最可靠的方法是复制元素并使用副本作为固定标题。这比使用垫片或在某处添加额外填充或任何有可能关闭甚至一点点的东西更好。通过这种方式，您的原始内容根本无法移动，因为您从未真正触摸原始内容。

顺便说一下，我还发现在CSS中保留样式并且只需要JS添加或删除类就可以更清晰地操作。这给我带来了很多麻烦。

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

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

<强> JS

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

将元素固定到顶部时出现问题

3 个答案: