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.
Related
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
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.
Okay this is a rather complicated setup/question so I will try to explain it as clear as possible. Right now stellar parallax is working great on my site with no issues whatsoever. this was accomplished by setting the responsive property in stellar.js to true which makes it so that the background image follows the div when you resize the window. Because the issue before was that resizing the window was bad because stellar vertically aligns the background images in a certain way so if you resized the window the div in question might end up in an area where the background is repeating or in an empty spot(if you had no repeat on), it just wouldnt be aligned with the background image anymore. Responsiveness=true fixed this.
However here is the new issue. I have a section on my website where 3 divs are set to display: none by default. 3 buttons, respectively, toggle their display. Toggling their display makes their parent div much longer therefore pushing the rest of the content of the page further down. This pushes the stellar divs out of position with their background images again and i can see areas where the image repeats or are blank(if you have no repeat). However if you resize the window after you toggled the three hidden divs, the stellar divs will automatically fix itself and realign the images as a result of it picking up the responsiveness. I was wondering if there was anyway perhaps I could make toggling the hidden divs trigger this realignment without the user having to resize the window(he/she wouldnt know he/she had to anyway)?
Perhaps a way to refresh a specific part of the page(the stellar divs)? Or perhaps a function to resize the window by like a pixel or even 0 pixels just to trigger the responsiveness?
Thanks in advance, I hope everything makes sense.
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.
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.