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.
Related
I am trying to change the position of my slip element via animation transition whenever a user scrolls to the bottom of the page. The problem that I'm having is that I don't know how to switch the positioning from flex to relative. The slip element needs to be positioned above the footer.
I've managed to achieve this with only switching classes but I don't like the jerking animation so I wanted to add some transition but now I don't know how to make it stick above the footer.
How do I make the slip element stick on top of the footer and not be fixed when a user scrolls to the bottom of the page? The goal is to achieve this with a smooth transition/animation.
Here is my stackblitz example of the problem.
This isn't really a ReactJS question, it's more of a question about HTML and CSS styling.
I would get the position of the footer: footer.offsetTop, and then I could get the user's scroll position: window.scrollY and the window height: window.innerHeight. Using all of these values, I would determine if the user has scrolled to the point where the footer is visible, and if so, make the slip element have an absolute position where the bottom is set to the footer.offsetTop
That should, in theory, work.
I actually found a stack overflow question just for determining if an element is scrolled into view: How to check if element is visible after scrolling? so that should help some.
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 have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.
I have seen several questions about floating or fixed sidebars on Stackoverflow, but I could find none that covers this scenario.
Take a look at this page as an example: http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx
When the page is scrolled up, the sidebar also scrolls up with it, until its top edge hits the top of the window. As the scrolling continues, the side bar stays fixed in its place until the page footer reaches up and pushes the sidebar up with itself.
Therefore, the sidebar is always trapped between the page header and the page footer, but within that limitation, it tries to stay visible as much as possible.
This is done by using javascript. I was wondering if you guys have already achieved something like this, or if you know of a solution, that you can share here.
Thank you.
This is a great tutorial on how to acheive this effect through jQuery... http://www.hongkiat.com/blog/css-sticky-position/
It uses jQuery .addClass() to add a class to the element when a certain scroll position is reached.
And the respective .removeClass() when the user scrolls back past.
I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.
essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page
http://jsfiddle.net/SRXMn/3/
the problem I'm having here is two-fold.
1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content
2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below
when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.
You could try using position:relative on div.scroll_hold