fullpage.js normalScrollElements not scrolling down - javascript

I am using fullPage.js on my site and for some reason, the normalScrollElements is not working as I expect it to. I have 5 sections on my site and I need to have normal scrolling for section2 which is Showroom. I used the normalScrollElements on that section and now the problem is that I cannot scroll down to the other sections(Contact, About). I don't know what code to put here, since it's basically normalScrollElements.
Here's a link to my site:
http://sabirmb.com/Parallax
Could anyone please explain to me what I'm doing wrong?
Thanks.

The problem has been fixed. Basically the only thing that I had to add was scrollOverflow:true as explained in the documentation.
For future reference, if you have a section that has more content inside than the screen viewport, you should use scrollOverflow:true and this will allow for the content to scroll in that viewport.

Related

How to realize horizontally scrolling to ID in Elementor?

currently I am creating a website with horizontal scrolling based on Elementor's official video tutorial. and the code they provide in the video description.
Unfortunately they didn't explain how to make the website scroll to anchor IDs. When doing so, either nothing happens or the page scrolls weirdly vertically and then horizontally to the desired section.
Do you have any ideas how to solve this issue? I'm glad for any ideas!
I already tried to add JS code snippets but nothing of it worked :(

Page Pilling or FullPage - How to make this scroll effect

I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/

How to use scroll magic to scroll snap and be full screen?

I want to create a section similar to the “App timers” section on this page(it's towards the bottom): https://www.android.com/versions/pie-9-0/. I can only have one section like this on my page with the rest being normal scroll.
I see that they use scrollmagic but I can’t seem to find examples similar to this in their documentation or that any one has done. I considered using fullpage.js, but I can’t seem to make it work with only one section activated like that in the middle.
Any suggestions?

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

implementing a floating sidebar in HTML, which stays visible within the boundaries of page header and page footer

I have seen several questions about floating or fixed sidebars on Stackoverflow, but I could find none that covers this scenario.
Take a look at this page as an example: http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx
When the page is scrolled up, the sidebar also scrolls up with it, until its top edge hits the top of the window. As the scrolling continues, the side bar stays fixed in its place until the page footer reaches up and pushes the sidebar up with itself.
Therefore, the sidebar is always trapped between the page header and the page footer, but within that limitation, it tries to stay visible as much as possible.
This is done by using javascript. I was wondering if you guys have already achieved something like this, or if you know of a solution, that you can share here.
Thank you.
This is a great tutorial on how to acheive this effect through jQuery... http://www.hongkiat.com/blog/css-sticky-position/
It uses jQuery .addClass() to add a class to the element when a certain scroll position is reached.
And the respective .removeClass() when the user scrolls back past.

Categories