Quick question here:
will $(this).scrollTop() value be equivalent on every screen when the bottom of a fixed position div meets the bottom of an adjacent relative positioned div (a div scrolling upward with the rest of the screen)?
Getting the scroll position when a fixed point meets a scrolling point is a bit of trial an error. It would be good to know if that value is good for javascript on every device.
Related
There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?
Using the IntersectionObserver you can detect if an element has scrolled into viewport, but is is possible to detect if the viewport itself has scrolled a certain number of px from the top?
What I'm trying to do:
I have an infinite scroll set up using IntersectionObserver which works fine. But I want to show a fixed positioned Scroll back to top button in the lower bottom/right corner of viewport — but I only want to show that if the user scrolls, say 200-300px from the top.
Somewhat late to the party but you can use intersection observer quite easily for this. You observe an element above the fold as it goes out of view change the 'scroll back to top' state. Easy as pie. This is way more efficient that messing with scroll events as it can block the main thread. MDN docs go into more depth.
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Stopping fixed position scrolling at a certain point?
After I scroll past a certain point I need an element (side bar of links) to not scroll anymore, but yet just stay where it is. I have tried setting this element to fixed after the certain point and this works fine other than it snaps the side bar links down into view in the window in the same position they were before i started scrolling and then fixes them to the window where they do not scroll anymore. I would like to not see this instead once i scroll past the certain point just leave the element where it is on the page, but do not allow it to be scrolled anymore (therefore my side bar of links will be slightly scrolled up off the page, but the bottom links still showing) . triggering the event of setting the element to fixed or not fixed is not my problem that works fine. I just need to position the element AFTER setting it to fixed so that i can put it back up where it started, or find and alternate to setting the position to fixed after I scroll past this certain point.
again desired behavior is that once i scroll down so far on my page, my side bar of links just stay where they are (partly scrolled down, which means the top part is off the page) and then as i continue to scroll down they do not move.
most likely i am thinking i need to reposition the links after the position is being changed to fixed.
ANY HELP? THANKS!
yes. There is a nifty little jquery plugin that handles this: https://github.com/bigspotteddog/ScrollToFixed
or you can reference this previous post dealing with the same subject matter: Stopping fixed position scrolling at a certain point?
I have a sliding screen on a long HTML page with left and right columns. How can I obtain the height position of the screen in the HTML page, knowing users use sliding bars? I need this to slide the left and right column content to follow users' movement. Thanks.
P.S.: I am using JQuery (if it helps).
You can use scrollTop to find the vertical scroll position of any DOM element.
$('#element').scrollTop()
Some other useful functions: scrollLeft() , offset() , position()