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
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?
Hay,
I'm using jquery.fullpage.min.js plugin in my site for fullpage and scrolloverflow.min.js for scroll inside divs. I set autoScrolling:false, scrollOverflow:true because i I don't want auto scrolling, and I want overflow scroll inside div.
The problem is that when I scroll the overflowed div, the whole page scrolled too.
I tried use normalScrollElements:"my-div", but it works only when autoScrolling:true.
how can I avoid page scroll when user scroll the overflowed div?
Thank for help!
Few things:
autoScrolling:false, scrollOverflow:true are not compatible options. You can probably see an error message saying exactly this in your JS console. So expect problems in different browsers :)
normalScrollElements won't have any effect when using autoScrolling:false.
normalScrollElements won't have any effect inside scrollOverflow
I used display:none for one of sections so its visible only on devices with less than 576px. And anchors are wrong, and scrolling jumps from second to first section. How to fix it?
This is the
page
According to GitHub's plugin docs, this is still an open issue that needs to be fixed by the lib's developer. What he mentioned as a workaround is destroying fullpage.js and reinitializing it again without the faulty section. (Whenever you are going to do that is up to you to find appropriate, whether on screen width resize, page loads, etc etc)
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 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?