Glitchy javascript持久性头实现

Question

我有这段代码：http://jsfiddle.net/KCb5z/7/

它的目的是让我点击黄色栏上的链接，并让它变得有效。它似乎在很大程度上起作用，但是在向下滚动时，它会在黄色条在页面顶部变得持久的部分周围出现毛刺。

我相信这是导致它的代码：

var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;

$window.scroll(function () {
    var currentScrollTop = $window.scrollTop();
    if (currentScrollTop > init && isFixed === false) {
        isFixed = true;
        $select.css({
            top: 0,
            position: 'fixed'
        });
    } else if (currentScrollTop <= init && isFixed === true) {
        isFixed = false;
        $select.css('position', 'relative');
    }
});

导致问题的原因是否明显，因为如果你一直向下滚动到底部就可以了。

Answer 1

当选择元素从relative更改为static时，文档会重新流动，从而导致出现故障，反之亦然。您需要找到一种方法来停止重新流动，方法是留下占位符元素以占用从流中移除元素时留下的空间（可能是visibility:hidden的重复元素），或者确保它首先不会影响文档流程。