Foundation Top Bar won't snap correctly - javascript

I'm trying to get foundations navbar working, but somehow it won't work.
It snaps about 250px too early. Just scroll down, the scroll bar should get sticky on top once it hits the top.
Javascript and CSS is loaded correctly.
I'm using Foundation 4.2.2 btw :)
The website I'm talking about:
http://gaumengut.lucid-lemon.com/index.php

Related

Delay JS. with WP Rocket broke my sticky navbar

I have a problem in all my websites made in Elementor and optimized with WP rocket.
the problem is with my navigation bar that becomes sticky when scrolling.
I have activated the option to minify and defer.
The problem starts when I activate the javascript delay, there my navigation bar does not sticky anymore when scrolling or if the page loads in some section lower than the top, the bar appears sticky but when it goes up it breaks.
the only way to get it working again is by adding the exceptions to all the jquery, js. and wp includes and content.
But in this way the site does not load the js in a delayed way and it no longer works for me.
did this happen to anyone else??
THANKS!

Why is my slider scrolling? How can I stop it from scrolling?

I am doing a website using a free slider from here. I want to use the slider with a nav bar at the top of the page. My problem is, whenever I add the navbar in to the page the slider begins to scroll up and down. If I remove my nav bar everything works fine. When the slider scrolls, only the arrow buttons and the page tabs at the bottom scroll but not the image. My website is MQMGaming.com. Is there anyway to keep the slider from scrolling so it is the same as without the nav bar?
Thanks in advance.
It's not the navigation itself causing the issue, it's the two br tags you have after the nav ends. If you remove them it works fine.

Vertical Parallax scrolling in hotdot

I am working on this parallax from git hub https://github.com/htdt/parallax.
The parallax effect is awesome here .I am trying to modify the code.Here the scroll is from right to left.I want a top /down scrolling.I have tried changing the positions(right to top ,left to bottom overflow-Y to overflow -x) ,but its not working .Any idea on how to to that?I would love to learn this one as the effect after the scroll to the element(box/image) is awesome.(It shows a little stirring kind of effect)I dint find it in any other project.Is there any other version (showing top down parallax of htdt)available. Please redirect in that case.
For Vertical Parallax scrolling you can use these other jQuery Plugins:-
http://darsa.in/
https://github.com/IanLunn/jQuery-Parallax
https://github.com/Prinzhorn/skrollr
and my Personal Favorite
http://johnpolacek.github.io/superscrollorama/

How to stop twitter bootstrap scrollspy at a certain distance?

Hey Im using bootstrap's scrollspy to have a sidenav move with my content. The problem is I have a massive footer and when the user keeps scrolling past the main body content, the sidenav keeps scrolling and overlaps the footer. Is there an easy work around for this?
Assuming that you already have your side nav setup and working with twitter bootstrap you would use the data-offset-bottom to stop it from scrolling in your footer. Heres an example:
<div id="leftnav" data-spy="affix" data-offset-top="149" data-offset-bottom="385">
You will have to play around with the numbers so that it works with the sizes of your footer so it will stop before it reaches the bottom. You can read about it here. Hope that helps.

diagonal parallax with scrollto nav

I'm trying to create a site that has a parallax type effect with scrollTo navigation control.
Similar to http://www.nike.com/jumpman23/aj2012/ however I only need to scroll on left and right (up & down). I can do horizontal and vertical parallax, and scrollTo I just cant get the diagonal parallax working (with mouse scroll)
I've currently got it working using scrollTo however this disables the user being able to scroll with the mouse. I'm creating a dynamic one page site so some times a pages content may be longer then other areas so the user will need to scroll down, once they reach the end of this content the parallax effect kicks in.
Can anyone suggest a way to do this? Or point me in the right direction.

Categories