I'm trying to do a landing page, where will be a banner (height: 100% - 200px). And I want, that first scroll down (via mouse wheel / arrow etc.) will scroll down for whole height of banner (100% of page - 200px) and then scroll normally rest of a page.
But when you will scroll back there and you will "step" (top of window will be on the bottom of an element) on banner, it will scroll whole height of banner back to top.
I've tried a plugin fullPage.js, but I can't use it, cause it fights with other plugin that I'm using.
Here is a jsfiddle with a basic simulation of my page: https://jsfiddle.net/Lua4v1p9/2/
basically, an element ".bann" has to be scrollable on one mouse wheel turn, if I'm describing it well enough.
Here is work version of my page online: http://suju.honzisdesign.cz
I hope, that I described my problem good enough, thanks for any response!
Related
I am using scrollreveal.min.js on my WordPress site.
Scroll reveal works just fine, but when I attempted to hide the vertical scroll bar that appears during animation (for the section) with
overflow-y:hidden;
the scroll bar was hidden for the element, but animation on scroll no longer worked for each item.
Also, one other question, in order for overflow-y:hidden; to work I have to comment out my overflow:auto; is this necessary or is there a way those can work together?
Overflow-y:hidden as per w3 schools "The content is clipped - and no scrolling mechanism is provided". This means that the content is cut off, as in, you can't scroll anymore. Kind of like an image when it's cropped, you can't scroll in a cropped image. You'll want something like this instead: Hide scroll bar, but still being able to scroll
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 a demo of a custom sticky nav.
Demo: http://evanzio.github.io/custom-sticky-header-nav/
Repo: https://github.com/evanzio/custom-sticky-header-nav
Functional Spec:
Header should stick to bottom of client window when landing on page.
When scrolling down, the header should remain fixed.
Once first image has become fully visible, header should stop sticking to the bottom and continue moving with the scroll.
Once the header hits the top of client viewport it will then stick to the top.
This all works fine, until a window resize. Once the page is resized from large to small, the waypoints seem to mess up and the header sticks and unsticks at random points.
Steps to replicate issue.
Load page in large
scroll to bottom of the page
resize browser width to small
start scrolling back up and you will see it jump around and leave a white space where the header should be.
I believe on resize the waypoints should refresh automatically, so not sure why this is breaking? Anyone have any ideas?
Or any other ways to achieve the functional spec?
Thanks!
So after some playing around, I realised it was because I had a fixed position on a waypoint element. Which is a NO NO!
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.
I need to dynamically resize a div based upon the positon of the browser scroll bar. The desired behavior is to have the featured div of a lightbox be rendered at 800px wide when it is opened, but then scale down to 1/3 that size as you scroll down the page, and then continually increase in size as you scroll back up. So far I've been able to get it to scale up as I scroll down, but am unable to get it to scale down. If anyone can help me out with this, it would be very much appreciated.
http://jsfiddle.net/juicesandmilks/CnuAL/3/
-Michael
Works for me:
http://jsfiddle.net/6APeM/1/
You have to remove the script tags if you put your js in the javascript part of jsFiddle.