javascript - Making Fixed floating element scrolling smoothly in Firefox and Chrome - Stack Overflow

admin管理员组

文章数量:1287541

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?

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>

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?

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>

• javascript
• html
• css
• firefox
• google-chrome

Share Improve this question Follow edited Dec 22, 2015 at 14:10 yAnTar 4,6101010 gold badges5151 silver badges7474 bronze badges asked Aug 8, 2011 at 15:31 Callum WhyteCallum Whyte 2,4291111 gold badges3838 silver badges5656 bronze badges 1

• 1 Here is the example set up: jsfiddle/nwelle/6PGZE – nwelle Commented Aug 8, 2011 at 15:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Use this:

$(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/nwelle/6PGZE/1/

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.

There is also a jquery plugin that takes care of this. Here is a demo of a header that pushes a banner up out of view then stops at the top of the page. For your example, pretend the banner is not there.

Demo: http://jsfiddle/ZczEt/

Edit: Updated fiddle: http://jsfiddle/ZczEt/2180/

Usage:

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

The description of the plugin is as follows:

This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Plugin and source: https://github./bigspotteddog/ScrollToFixed

本文标签： javascriptMaking Fixed floating element scrolling smoothly in Firefox and ChromeStack Overflow