question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

sticky header offsetY not working

See original GitHub issue

Hello Thanks for this project - First time using it today and its really useful!

I have been trying the sticky Header extention and it seems to be working - Unless you try and add the stickyHeaderOffsetY

using Local host - Uniserver - apache / php and Google chrome

Downloaded today build to 1.15.5

Using config
$table.bootstrapTable({ stickyHeader: true, stickyHeaderOffsetY: 0 , stickyHeaderOffsetLeft: '3em', stickyHeaderOffsetRight: '3em', });

Outputs Table looks good image

On scroll - Sticky seems fine … needs offset

image

checking on inspect : top:0px inline style image

Update Config : $table.bootstrapTable({ stickyHeader: true, stickyHeaderOffsetY: 60 , stickyHeaderOffsetLeft: '3em', stickyHeaderOffsetRight: '3em', });

Header is no longer Sticky :

image

On inspect top inline style is no longer applied

image

Unfortunately there is no on-line example at the moment, Just trying on local

I have a quick fix by adding extra CSS

.sticky-header-container.fix-sticky.fixed-table-container {top: 60px;}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:15 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
Marcusyancommented, Sep 27, 2020

this.$stickyContainer.css(‘top’, “”.concat(this.options.stickyHeaderOffsetY)); ===> this.$stickyContainer.css(‘top’, “”.concat(this.options.stickyHeaderOffsetY)+‘px’);

1reaction
dreamerworkscommented, Feb 7, 2020

https://live.bootstrap-table.com/code/dreamerworks/1701

No matter what value you pass to stickyHeaderOffsetY, it refuses to work.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Offset not working on desktop with sticky header | WordPress.org
On desktop, the offset is too small, and content of interest is hidden by the sticky header. On mobile, it works perfectly.
Read more >
position:sticky is not working - Stack Overflow
So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside...
Read more >
Offset for sticky header not working - Support - Themeco Forum
Hi, you have some code to calculate the height of the header for using as offset for the in-page scroll links. in x-body.js(1831)...
Read more >
Fixed header not working on first time load(Offset Positions ...
FWIW, I'm seeing a very similar issue where the fixed header doesn't 'stick' at the top of the page until you resize the...
Read more >
Stop Using Fixed Headers and Start Using Sticky Ones
Like them or not, headers that stay visible at the top of the page are ... Or Facebook, which uses relative positioning and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found