mkoryak / mkoryak/floatThead

Bounce effect when scrolling

Open
#375 16 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement workaround
Dominant language
JavaScript
Stars
1.2k
Forks
193
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the bounce on the demo site in the listed Chrome, Firefox, or Safari versions while watching the floatThead-container translateY behavior during scroll. Trace where the container changes position and where fixed is applied; done means the container stays static until the page passes the header and no longer visibly bounces.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.