CODEWITHSUNDEEP
jquerycssjquery-animate
QuangTV
QuangTV

Reputation: 45

jQuery css animation shaking when scrolling

enter image description here

I have this outer div, contains a table. What I want is when I horizontally scroll the outer div, the header of the table stay fixed. I have sussessfully did this by create a new table that contains only the header, this divheader is absolute position left: 0;

When the outer div scroll, left position of divheader equals outer div scrollLeft.

$('#outerDiv').scroll(function () {
    var left = $('#outerDiv').scrollLeft();
    $('#divheader').css('left', left);                
});

This work pretty well on firefox, but on chrome, divheader shaking sometimes, when scrolling fast. On IE(10), it shakes all the times.

My questions is how can I avoid the shaking things on IE and chrome.

Please consider this fiddler: http://jsfiddle.net/Y7xZm/11/. Test it on IE

Upvotes: 0

Views: 3240

Answers (1)

Mark S
Mark S

Reputation: 3799

Instead of setting the left property on scroll(), why not set the #divheader position to fixed.

See this demo.

EDIT:

It can't find any technique to prevent that shaking/jerky #divheader on scroll() better than just setting it a position:fixed. So instead I made a solution to enable scrolling down on that fixed element:

First we need to wrap #divheader table on a <div> and we'll set its scrollTop() position base on the #outerDiv's scrollTop() value.

$('#outerDiv').scroll(function() {
    var top = $('#outerDiv').scrollTop();
    $('#headerWrapper').scrollTop(top);    
});

Then we'll need to set the height of this wrapper equals to the height of the #outerDiv so it won't overflow on it. Getting the height of #outerDiv is a little tricky because of the scrollbar. And the best solution I've come up with is getting the height of element which is set to 100% inside the #outerDiv. 

//create a new element with height 100% inside the '#outerDiv'
var p = $('<p style="height: 100%;"/>');
$('#outerDiv').append(p);
//get the elements height then remove it
var h = p.height();
$(p).remove();
//set the wrapper's height
$('#headerWrapper').height(h);

Here is the jsfiddle.

Upvotes: 2

Related Questions