Prevent document from jumping after refresh - javascript

I'm trying to use https://github.com/dmsl/academic-responsive-template to design a website but it has this issue where on refresh, the content jumps down. If I refresh, the content below the navigation bar visibly starts out higher, and then jumps down after a bit to its final position. How can I stop this behaviour and start out with the final position instead of this jump?

Give a height of 28px to this element
screenshot about at what position in bio.html to apply height

Related

Scaling a div inside scrollable container

I have a scrollable container inside which I have an element that overflows and causes the scroll.
I want to zoom the whole div. Transform origin is set to 0 0 because I need to be able to scroll it and for some reason HTML doesn't allow that when it's 50% 50%.
Everything works correctly when the element is not scrolled down. However, when I scroll, the transform origin is still set to the top left point all the way up. Causing the scroll to go back to it resulting in a weird scroll that doesn't scroll where I want.
How can I work around this?
Codesandbox here:
https://codesandbox.io/s/vigilant-butterfly-i5klyx?file=/index.html
As you can see in the codesandbox, when scrolled completely to the top, it works correctly. Try scrolling to the second or third page and you'll see my problem

Why is the saved scroll position affected by a shrinking navbar on page reload?

I know there are a lot of similar questions out there, but I couldn't find one that answers this in my case. I am using an IntersectionObserver to trigger a navbar style (to shrink it). The navbar has the sticky-top class, with the viewport as the root (implicit).
The subtle issue is, on reloading the page, the scroll position is remembered, but it seems to adjust as the navbar shrinks. This results in a gradual "ratcheting up" of the page on subsequent reloads. I don't expect users to continuously reload the page, but I wanted to thoroughly understand what is going on, and why this is occurring.
Here is a jsfiddle which demonstrate the issue.
To see the issue, scroll the content frame down until the navbar shrinks, and then right click the frame to reload just that frame (since reloading the whole jsfiddle page will reset everything, including the scroll position).
One theory I have is that the scroll position is being restored prior to the position: sticky; style becoming effectively position: fixed;, thus the height of the navbar is throwing off the scroll position.
However, the scroll position seems to shift only by a small amount. This leads me to believe that the browser is smart enough to account for the sticky element being removed from the page flow, and accounts for the difference, but it cannot know ahead of time that the element will shrink. This still confuses me though, since the size of the navbar after it is removed from the flow of the page should not be relevant to the restored scroll position.
I have a hunch that there is some kind of race condition causing this, where the relevant events are the scroll restore, the IntersectionObserver event on the trigger element, and the application of the skinny navbar styles. Can anyone shed some light on this?

Detect HTML and CSS for a DIV and change to make it scroll with a sibling DIV

I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.

How to prevent div from scrolling out of page

I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.

Scale the size of a div based upon the position of the browser scroll bar

I need to dynamically resize a div based upon the positon of the browser scroll bar. The desired behavior is to have the featured div of a lightbox be rendered at 800px wide when it is opened, but then scale down to 1/3 that size as you scroll down the page, and then continually increase in size as you scroll back up. So far I've been able to get it to scale up as I scroll down, but am unable to get it to scale down. If anyone can help me out with this, it would be very much appreciated.
http://jsfiddle.net/juicesandmilks/CnuAL/3/
-Michael
Works for me:
http://jsfiddle.net/6APeM/1/
You have to remove the script tags if you put your js in the javascript part of jsFiddle.

Categories