javascript持久标头实现有问题

Glitchy javascript persistent header implementation

本文关键字：实现 有问题 javascript      更新时间：2023-09-26

我有这个代码: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');
    }
});

很明显是什么导致了这个问题，因为如果你一直向下滚动到底部，它工作良好

故障似乎是由于当select元素将状态从relative更改为static时文档重新流动引起的，反之亦然。您需要找到一种方法来阻止重新流，要么留下一个占位符元素来占用从流中删除元素时留下的空间(可能是带有visibility:hidden的重复元素)，要么确保它首先不会影响文档流。

相关文章：