I've a tricky problem. So I have two fixed element with space in between under those two elements I have a relative positioned element, everything is ok so far. Now when I scroll the relative positioned element will scroll and appear in between the two fixed elements and on top of the first one, here is the jsfiddle to make it clearer. I'd like the relative positioned content not to appear when scroll, like if it was a box scrolling with an overflow hidden.
The goal is to do a kind of box scrolling but with a window scrolling.
I'd like a css solution but I'm also opened to any js solution.
What about this?
http://jsbin.com/uSEfUMA/2/edit
fixed has a background
you can also add padding to body if you don't want to set a background to fixed
Could make a zindexed div with a background set to the same color as the page bg, put that over the relative positioned div and under the absolutes so when the relative div scrolls to that point of the page it appears to dissapear how I believe you want it to, or just use overflow hidden and absolute positioning to lock it into place and clip the content.
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 need to have a fixed div on screen only between certain points, defined by whether certain elements are on top of the screen or not.
I tried to accomplish it by changing the position via JQuery. The problem I found is, at the bottom point, when I change the position from fixed to static, the div jumps away, instead of start scrolling from that point on.
Here is the jsbin: http://jsbin.com/woroyejahe/5/
Thanks
Just get the position of the lower div and set it as the top for your CSS style with position: absolute.
Ok, so here's what I have: http://jsfiddle.net/E2U3j/
And as it's a pretty large div, I'd like to have a fixed horizontal scroll bar on the top of the window when I'm scrolling into that div, but if I'm not completely into the div (e.g If the div is only visible a half,I mean if it doesn't fill the whole height of the window), the horizontal scroll bar should be in the top of the div... How would you solve this?
Thanks :)
Try jQuery Scrollbar with external scrollbar (available on advaced scrollbars demo page) - scrollbar can be placed in any part of your page, you can hide/show it, make it fixed, etc...
The one thing you need is to handle window scroll and check current scroll position, compare it to your container offset and if it's greater - make scrollbar fixed, if not - change position to absolute (in case when scrollbar is inside of your container).
this code should solve your problem<div id="topnav" style="position:fixed; max-height:x; overflow-y:scroll;"></div> then the contents of your top nav is scrollable within itself and is fixed on the top of your page
Here's a JS fiddle of what I am talking about:
http://jsfiddle.net/r77K8/98/
My overlay gives the appearance of having disabled the link, but the link still remains clickable. I looked through some examples of modal dialog windows in hopes of finding a solution. As far as I can tell I need to use absolute positioning.
I am hesitant to do so because in reality my content is dynamically populated. It seems like a lot of added work to try and keep the overlay the correct dimensions -- I really like how it looks right now, I just would like to make the controls unclickable while the overlay is the parent. Is this possible?
In your example, it looks like you have the contents that you are trying to disable INSIDE the overlay div. In order for this to work, you need to put the overlay div OVER the contents, so place it after your contents. That way it covers up your content div.
And yes, your overlay should have absolute positioning so that you place it at the top-right corner of the parent container and give it 100% width and height, so that it covers the entire parent container.
See this jsfiddle for an example.
EDIT:
Try this example instead. Put both the contents and the overlay in a container. That way, the overlay will only take up that part of the page.
Notice that the container divs (divLink1 and divLink2) must have position:relative for this to work. According to the absolute description in this link, "The element is positioned relative to its first positioned (not static) ancestor element." So you have to set the containers to position:relative, but don't actually move them.