Question

我有一个脚本，当它滚动时，使用jQuery和CSS在页面顶部定位一些东西。但是，滚动时条形图看起来很震动，并且已经固定在Google Chrome和Mozilla Firefox浏览器的顶部。为什么会这样？

我希望你能理解我想要描述的内容。如果没有，请将此代码与jQuery库一起复制并粘贴以查看我的意思：

<style type='text/css'>
body {
    height:1000px;
    margin:0;
    padding:0;
}

#scroller {
    position:relative;
    top:60px;
    width:100%;
    background:#CCC;
    height:20px;
}
</style>

<script type='text/javascript'>
    $(window).load(function() {
        $(window).scroll(function() {
            if($(window).scrollTop()>60) {
              $('#scroller').css('top', $(window).scrollTop());
            }
        });
    });
</script>

<div id="scroller">Some controls</div>

Answer 1

使用此：

$(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>60){
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('top', 0);
        } else {
            $('#scroller').css('position', 'relative');
            $('#scroller').css('top', 60);
        }
    });
});

http://jsfiddle.net/nwellcome/6PGZE/1/

不是一直操纵顶部，一旦它应该保持在顶部设置“位置”到“固定”并且顶部为0，那么它不必等待javascript滚动事件触发到确定位置。

Answer 2

还有一个jquery插件可以解决这个问题。这是一个标题的演示，它将横幅推出视图，然后停在页面顶部。举个例子，假装横幅不存在。

演示：http://jsfiddle.net/ZczEt/

编辑：更新小提琴：http://jsfiddle.net/ZczEt/2180/

用法：

$(document).ready(function() {
    $('.header').scrollToFixed();
});

插件的描述如下：

此插件用于将元素固定到页面顶部，如果元素在垂直方向上滚动出视图;但是，它确实允许元素继续向左或向右移动水平滚动。

给定一个marginTop选项，一旦垂直滚动到达目标位置，该元素将停止垂直向上移动;但是，当页面向左或向右滚动时，元素仍将水平移动。页面向下滚动到目标位置后，元素将恢复到页面上的原始位置。

此插件已在Firefox 3/4，Google Chrome 10/11，Safari 5和Internet Explorer 8/9中进行了测试。

插件和来源：https://github.com/bigspotteddog/ScrollToFixed

使固定浮动元素在Firefox和Chrome中平滑滚动

2 个答案: