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?
Related
Im trying to add a button/tab on the bottom right corner of the page. That when clicked slides up a window. I've seen this somewhere but i can't get it to work.
I found my answer shortly after. If you're looking for the same, this thread might help:
HTML CSS/JS Bottom navbar Sliding Up
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!
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! :)
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
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?