Hey guys I have a fixed background attachment for scrolling uptill two pages of the content after that i want the second page to be fixed and make the third page with a different background to come up covering the second page. How can I make the content of the second page fixed when it comes at the top? So that scroll effect can be appliedm
You have to use Javascript Intersection Observer API. Create an instance of it and set it to observe your 3rd page. On threshold crossing apply the styles you need (like setting position: relative; to both of your pages and then adjusting them via z-index).
Just don't unobserve() on collision so you can roll back changes on, well, scrolling up on your page.
Related
I am in the process of reworking a simple web site so that it can run on a thumb drive, aka with no server involved.
On a page on the original I had a "select" control that would execute a script that read a file and loaded images and some text.
Since I can't load files from the client's computer, I put all the information on the page, each entry in a separate div, each with a unique id, and am using style.visible = "hidden" and "visible" to hide the ones I don't want to see and show the ones I do.
Problem is, the page stays the same size (length) as if each of the divs was visible, and the space occupied by the divs I have hidden is not released.
How do I get the hidden divs to give up their space?
Here's the original page: https://www.vintagebankantiques.net/people.html
A css rule like
.class-of-divs{
min-width: 100%
}
or possibly
.class-of-divs{
min-width: 100vw
}
should help. Without having a JS fiddle or something it's hard to say more.
What these rules do is say that those divs must all be 100% of the width of the page, and shouldn't change size based on the presence of the other divs.
A problem you might get is that the divs will still get shifted in position by their neighbours. To prevent that, you could try setting display: none instead of visible: hidden. The key difference is that a div with a visibility of hidden still affects page layout. A div with a display of none does not affect page layout.
Aim: As we scroll the youtube on browsers, the whole page scrolls down, I want to create two scrollers:
Left one for video and comment scrolling.
Right one for Up next(suggested videos) scrolling.
I found out we can do that with overflow: scroll;shown in this JSfiddle
Take example: Sample Youtube video
If you inspect these are the two columns:
However, when I apply the style property there (overflow:scroll). Its not applied.
Since Its a dynamic page, I wanted to make a chrome extension that will do this job, but I don't know how to begin?
Update : Locally->
Not working by cut-paste in live page:
I made a JSfiddle based off the DOM structure of the YouTube page. I simulated the dynamically loading content with some random images.
Basically YouTube has an overflow-y: scroll on the body element. Therefore when you try to add an overflow-y: scroll to any children of body, there is technically no content to overflow since the body has already handled it.
So the first step is to stop the body from overflowing. For this you can set overflow-y: hidden on body. Next you will notice there is still no scroll on the columns. This is because the columns height is expanding to fit the dynamically loaded content. So you need to force the two columns to have a fixed height. Then when the dynamically added content exceeds the height, it will overflow and scroll bar will appear. To fix the height you can either explicitly set the height of #primary/#secondary, or the parent #columns, or any ancestor node up the tree and just inherit the height.
Anyway so these are the fiddles: Before and After.
UPDATE: Adding youtube comments to the #secondary column.
Here is what I am trying to do: When the user is clicking a button, a transparent overlay is opening. The background shouldn't be scrollable but stay at the scroll position. So what I am doing at the moment is that once the button is clicked, I safe the current scroll position via window.scrollY, then add overflow: hidden to both the html and body tag (which unfortunately scrolls the page to the very top), then proceed to scroll to the saved position inside the main div of the website. In most browsers these steps aren't noticeable so it seems like everything just stays at the same position. In Safari however, you can see that for a few ms the background scrolls to the very top and then back again.
So what I would like to know is how to execute multiple methods at once before the DOM updates. Or maybe you can think of another way of doing this?
Thank you!
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.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.