The website is working as intended so apart from an annoying issue where it automatically scrolls everything back to the start of the second section.
Is there any way I can keep the scroll from the first video background section to the second section and have the second scroll like a normal website without the page scrolling to the top every time I scroll down?
The site can be seen here: http://lukedaly.ninja/gianttest/
This is the plugin I am using: https://github.com/alvarotrigo/fullPage.js
All help is very much appreciated! :)
Related
My page consists of fullscreen sections (100vh), and I have made it possible to slide between the fullscreen sections, with the mousewheel.
It seems as it should, and you can scroll all the way down to the bottom and all the way up to the top of the page.
The problem is that when you get to the top of the page, it has to be able to scroll up again, and sliding up to the bottom.
I hope it makes sense.
I have searched a lot online, but I cannot find answers to how to do it.
How can I fix this problem?
I am having a weird problem and cannot even diagnose what is causing it. I am working on my professor's website: jurgec.net
The problem is only on the mobile website. If you click one of the links such as "I am an undergraduate student" then scroll down a little bit, and then press back, the website doesn't fully land at the top of the page. You can see a bit of the yellow page at the bottom.
I have a feeling its because each section's height depends on the browser's screen size. And since on mobile chrome, scrolling down causes the URL bar to disappear, it changes browser's height hence ruining the size of the website's sections.
Any help is greatly appreciated!
This is because the back button returns you to the previous "state" of the website you were at. If you scroll down it's going to go to that part where you were when you made the Click.
Does $(document).ready() functions fire after a back button press?? If they do (not sure at the moment) you could do something like this.
$(document).ready(function(){
scroll(0,0)
});
Which if that works shouldn't really affect you because on initial page load you are already at (0,0) so you wouldn't notice any jumping. Not sure if this would work for you, but good luck!
I'm using fullPage.js on my site and I have a section(Studio) where I have content that needs a normal scrolling. Now the problem is I cannot achieve that normal scrolling on that section. When I scroll on it, it automatically moves to the next section and skips the content inside fully.
I have read a few posts around S.O and tried the different answers but none works so far.
Here's a link to my site:
http://sabirmb.com/Parallax
Basically I set scrollOverflow: true; to allow for scrolling but it doesn't work.
Any ideas?
Thanks
I am building a cordova app which has pull to refresh functionality. Pull to refresh and other things are working fine. However, when scrolling is in progress and user touches the screen, scroll bar reaches to bottom of page. I tried debugging it but could not reach to the cause. Surprising fact is, this issue is there on the demo of iscroll as well and I wonder no one has noticed it till now.
iscoll demo link : http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
if you tap/touch the screen when scrolling is in progress, it goes to bottom of page. Ideally it should stop scrolling. Please help.
After lot of head banging, I found a solution. Remove "useTransition: true" from myscroll object and it will be fixed.
I'm trying to find the best technique for showing a navigation/menu for a mobile site I'm working on. So far all my solutions have flaws, and I was wondering if anyone could point me in the right direction. (You may have to reduce browser window size to make the examples work as intended)
First off, take a look at this "basic" example: http://audunaas.no/menu/problem.html
You'll notice the content is still scrollable while the navigation is open. This is confusing and annoying.
My first attempt at a fix was to set the body to overflow:hidden and position:fixed whenever the navigation is open. Example here: (Had to remove link because maximum 2 links in post)
This, however, causes the body to snap back to the top and "forget" its scroll position. This means you are taken back to the top of the page whenever you open the navigation. Not good.
Lastly, my best solution so far is one where i put all the page content inside a #scroll-area-div with a fixed position taking up most of the screen, and body scroll set to hidden. Example here: http://audunaas.no/menu/
This solves most of the problems in the page itself, but breaks the "memory" of the back button. This means whenever you click back in your browser you are taken to the top of the page instead of back to where you were before you decided to click a link. (Mobile safari seems to be the only browser that remembers scroll position on div's aswell as body)
I can't really think of any more solutions to this, except for maybe some sort of javascript. Does anyone have some experience with similar cases, or any ideas on how to accomplish this?
The solution must:
Prevent scrolling on page content when navigation is open
Preserve scroll position on page content when navigation is open
Remember scroll position on previous page when back-button is used