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

Question

我正在向我的 friend 网站添加一些新功能，该网站已经建成。他想要一个位于标题下方的 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

前面的答案几乎是正确的。它不会完全起作用，因为 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);

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