I am trying to work with the famous Keith Clark tutorial for clean parallax css pages ( http://blog.keithclark.co.uk/pure-css-parallax-websites/ ).
So far so good. The problem occurs when I want to combine it with a jQuery smooth scrollbar.
The problem occurs when the page is already scrolling. Thus, basically, from above it scrolls exactly to the point where I want it to scroll, but if the page drops to products or contacts, it scrolls to strange places.
I tried a bunch of different snippets for this, but it looks like it just doesn't want to work!
HTML
Navigation:
<ul class="nav navbar-nav navbar-right"> <li><a href="#group2">Home</a></li> <li><a href="#group3">About</a></li> <li><a href="#group5">Products</a></li> <li><a href="#group7">Contact</a></li> </ul>
Body
<div class="parallax"> <div id="group2" class="parallax__group"> <div class="parallax__layer parallax__layer--back"> <div class="title">START</div> </div> </div> <div id="group3" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">ABOUT</div> </div> </div> <div id="group4" class="parallax__group"> <div class="parallax__layer parallax__layer--deep"> <div class="title">RANDOM PICTURE</div> </div> </div> <div id="group5" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">PRODUCTS</div> </div> </div> <div id="group6" class="parallax__group"> <div class="parallax__layer parallax__layer--back"> <div class="title">RANDOM PICTURE</div> </div> </div> <div id="group7" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">CONTACT</div> </div> </div> </div>
Jquery:
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('.parallax').animate({ scrollTop: target.offset().top }, 2500); return false; } } }); });
These are the most important parts of the code - the rest you can find on jsfiddle ... http://jsfiddle.net/mgLzejad/1/
Check the code and see if you can find the error - I can’t ....
source share