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.
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'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.
Here is an image of what i'm seeing currently:
As you can see the div is behind the image and can only be seen becuase of the image opacity.
Any help would be greaty appreciated, thank you.
It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.
Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).
Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....
The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.
Animate method of jquery works on div with fixed position but not on div with static position .Why is it so. Although i know the reason for relative and absolute position.But cant understand why is it for fixed position
As per jQuery animate documentation
Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default
Definition for fixed position
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.
Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/position
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.
Good day.
I need script that will follow the mouse and will scroll content depending on what side mouse is. If left then left, if right then right.
I need it for cases when line of hrefs will exceed width of block, like here http://cloud.ignatynikulin.com/45121918090s3R15193i
If the width is exceed then you will be able to scroll it when you put your mouse to right.
Something that will do that: http://codecanyon.net/item/jquery-mouse-slider/full_screen_preview/143061
I tried that script, but the problem with it is that it needs to rely on some width that I don't have.
Any plugin or ideas suggestion?
Thank you!
Check out the answer here from StackOverflow - it's a perfect solution:
Continuous scroll on hover [performance]
Make the containing div positioned absolute. Then in jQuery, catch the onMouseMove event, calculate the mouse position relative to the containing div (using .width() this works even with dynamic width), and change the left/right property of your containing div according to this.
Reference: jQuery get mouse position within an element