Menu
To make an element sticky, do: make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element. It also returns the sticky element to its original non-sticky position when scrolling back above it.
If you really want position: sticky to work on all modern browsers, then you should consider not using overflow: hidden on the <body> or any wrapper surrounding the main content, but rather put a wrapper around elements that will overflow the viewport. Then, those wrappers should use overflow: hidden.
Try introducing a wrapper div around the tag - this way you can separate the positioning logic on the wrapper, and set the tag to position: fixed; for stickiness. Note that position: fixed; by itself on the tag will pull it out of its normal dom flow, so you need to adjust its positioning.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
I have a div with position: absolute and overflow: auto. Inside this div I have a div that should act sticky and should be fixed(top: 0, bottom: 0, overflow: auto) when I scroll.
I can fix this div, but I can't return it to original position because I can't attached the scroll event when this div is fixed.
$('.right').scroll(function() {
if ($('.scroll').offset().top <= 0) {
$('.scroll').css({
'position': 'fixed',
'top': 0,
'left': '20px',
'right': '0',
'overflow': 'auto'
})
}
})
Please check my JSFiddle for more info - JSFIDDLE
Thank you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With