Bounce effect when scrolling

[simonsmith]

No JSFiddle as the demo site seems adequate but I have provided a short video that hopefully demonstrates what I am seeing - https://cl.ly/lMlW

When scrolling the translateY value of floatThead-container is updated and this lags slightly behind the scroll so the table head seems to 'bounce' in position as the user scrolls up and down.

OS: macOS Browsers used:

• Chrome 60
• Firefox 55
• Safari 10

Is it possible to leave the floatThead-container static in the page until it becomes necessary to apply fixed (once the user has scrolled past)?

[mkoryak]

this PR might be a fix for that: https://github.com/mkoryak/floatThead/pull/357 I havent really had much time to spend here as I used to, I should really look at it soon.

also, there is another way to work around that issue, used position:'absolute' instead of fixed does this table exhibit the same bouncyness for you:

http://mkoryak.github.io/floatThead/examples/window-scrolling/

[simonsmith]

@mkoryak Same problem with position: absolute however when trying the code from that PR the issue seems to be fixed.

[mkoryak]

That's good, the pr might break some other scrolling type (there are a total of 16 code paths to test) so keep that in mind

[herringtown]

anyone noticed that when you switch to position: absolute, it doesn't respect the bottom offset? In fact, when it hits the bottom offset it "jumps" down to the bottom of the container actually (instead of stopping it's translateY increment). I'll jsfiddle this in a second under a new ticket...

[MikeGaolz]

@herringtown Did you solve the problem, How do you solve it?

[mkoryak]

Does using fixed positioning do anything for you?

On Wed, Dec 19, 2018, 9:59 AM MikeGaolz <[email protected] wrote:

@herringtown https://github.com/herringtown Did you solve the problem, How do you solve it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mkoryak/floatThead/issues/375#issuecomment-448625024, or mute the thread https://github.com/notifications/unsubscribe-auth/AAXbSdGqpDMOlej9wPh9rw_FATuKdH_-ks5u6lRrgaJpZM4OJTMb .

[simonsmith]

In case it helps anyone else, I ended up creating a very simplistic version of this plugin - https://github.com/simonsmith/jquery.stickyTableHeader

Not as full featured as floaThead but it did meet my strict requirement for accessibility

[mkoryak]

@simonsmith floatthead creates aria attributes, but it is true that I do not clone the existing thead into the hidden one because it creates a lot of problems in certain tables. Also you should probably figure out how to support horizontal scrolling in your plugin ;)

[simonsmith]

@mkoryak Yep, it's by no means perfect but I had a hard requirement to support screenreaders and from what I could tell any solution that didn't leave an existing thead behind caused the user to be lost in a table with no column announcements.

Thanks for the issues you opened also :)

[Neill83]

@mkoryak what about this issue?

[mkoryak]

It's an issue I have not fixed

[mkoryak]

I should note that there exists a workaround for this issue:

use position:'absolute' instead of fixed. This is sometimes not ideal, hence this issue.

Also when I originally wrote this plugin back in 2013, I did not anticipate anyone using it on mobile. You really shouldn't use it on mobile.

[mledur]

If you use position:'absolute', the bounce effect will be fixed before the window hits thead.... however, unfortunately, it's transfered to the floating element, while the window is scrolling in the table.

In both cases, it's all about the translateY transform, triggered when window.scroll is changed. For some reason, mobile browsers don't deal well with that, thus the delay.

A potential solution to stop this effect in mobile devices is a mix of both: position:'absolute' if window scroll position is less than the table header position, and position:'fixed' otherwise.

[lubomirblazekcz]

Here is my quick solution, if someone needs

var observer = new MutationObserver(function(mutationsList, observer){
    for(let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
            if (mutation.target.style.cssText.match(/translateY\((.*)\)/g)[0].replace(/\D/g, "") > 0) {
                $(".floatThead-container").removeClass("floated")
            } else {
                $(".floatThead-container").addClass("floated")
            }
        }
    }
});

observer.observe($(".floatThead-container")[0], {
    attributes:    true,
    attributeFilter: ["style"]
});

<style>
    .table-responsive {
        position: relative;
    }
    .floatThead-container:not(.floated) {
        position: absolute !important;
        transform: none !important;
    }
</style>

[mkoryak]

Are you using a mutation observer because the floatTheaed event does not work for you?

example from the docs:

var $table = $('table.demo2');
$table.on("floatThead", function(e, isFloated, $floatContainer){
    if(isFloated){
        $floatContainer.addClass("floated"); // the div containing the table containing the thead
        $(this).addClass("floated"); // $table
    } else {
        $floatContainer.removeClass("floated");
        $(this).removeClass("floated");
    }
});
$table.floatThead(...);

[lubomirblazekcz]

it worked for me, but there was a big delay between floated and not floated state so I've decided to use mutation observer instead