使固定浮动元素在Firefox和Chrome中顺利滚动 [英] Making Fixed floating element scrolling smoothly in Firefox and Chrome

问题描述

我有一个脚本，使用jQuery和CSS来定位在页面顶部的东西，当它滚动。但是，当您滚动时，该栏看起来像在抖动，它已被固定在Google Chrome浏览器和Mozilla Firefox浏览器的顶部。为什么会是这样？

I have a script that uses jQuery and CSS to position something at the top of the page when it scrolls. However, the bar looks like it's shaking when you scroll and it has been fixed to the top of the browser in Google Chrome and Mozilla Firefox. Why could this be?

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

I hope you can understand what I'm trying to describe. If not, copy and paste this code along with a jQuery library to see what I mean:

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

推荐答案

使用方法：

$(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滚动事件触发修复位置。

Rather than manipulating the top all the time, once it's supposed to stay at the top set "position" to "fixed" and top to 0, that way it doesn't have to wait for the javascript scroll event to fire to fix the position.

这篇关于使固定浮动元素在Firefox和Chrome中顺利滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！