I have built a website with several sticky headers depending on which part of the page you are viewing. I am using JQuery Waypoints and Smooth scroll.
http://www.peachtreecollective.com/swel/
I just have a few kinks that I have been trying to smooth out unsuccessfully for a few days now, and I would greatly appreciate if someone can help me solve the issues below.
1) After you scroll past the first waypoint, and then try to scroll back to the top of the page, the content gets stuck underneath the header. I have tried to toggle the sticky class on the nav for the up direction but that doesn't work. For example...
response.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky2', direction=='up');
if (direction == 'up') nav_container.css({ 'height':'auto' });
else nav_container.css({ 'height':outerHeight() });
},offset: 0 });
response.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='up');
}, offset: 0 });
I realise I am missing some kind of logic here so if someone can shed some light, again would be so grateful.
2) In safari & chrome, the anchor links work great if you click on them in the order they are listed in the HTML code... but if you were to click on "smart entertainment" from the very top of the page, it jumps you down to half way on the entertainment page. Same is true if you are on the Smart Productions page and click onto Smart Design.When you are near the bottom of the page, and click on "smart people", you get to the pictures but not to the actual top of the section. Does anyone know how I can fix this?
Thank you again.