Digital experiences for all disciplines
Forum Replies Created
-
Posted in: We hit Power Elite.
-
I’m using version 2.1.
There was a smooth-scroll-link class function in version 2.1. The problem I had with this function is it wouldn’t update the nav-line styling.
It also wouldn’t handle partial single page websites. If you want to see what I mean check out skipthelinevegas.com. The navigation has a smooth scroll effect on the homepage, but if you visit Terms & Conditions the navigation will still work. Your class function only worked for links pointing to same page they were on.
My issue is with the mobile menu though. Check out the site on your phone. If you click a mobile menu link it does the smooth scroll effect but the menu stays open. I was hoping there was a javascript function I could use to close the mobile menu without having to mess with css styles.
// intercept menu clicks jQuery('.menu-item a').click(function(){ // link points to an anchor on the same page. update nav-line style and scroll to content if (window.location.pathname) { // hide nav-line for all menu items jQuery('.nav-line').hide(); // show nav-line on this link clicked jQuery(this).children('.nav-line').show(); // get name of anchor and scroll to content var anchor = jQuery(this).attr('href').substr(1); scrollSkip(anchor); return false; } else { // link does not point to an anchor on the same page. redirect page normally. return true; } }); // modified version of your internally scrolling function function scrollSkip(linkHref) { var spacerHeight = jQuery(linkHref).height(), headerHeight = 0; if (jQuery('.sticky-header').length > 0) { headerHeight = jQuery('.sticky-header').height(); } if (jQuery('#wpadminbar').length > 0) { headerHeight = headerHeight + 28; } jQuery('html, body').stop().animate({ scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight }, 1000, 'easeInOutExpo'); }
Better single page site support.
– A navigation option to add ‘smooth-scroll-link’ class to each navigation link.
– The ability to use different menus on different pages. For example, on our homepage I want to go ‘single page’ with the navigation smooth scroll linking to different anchors on the page. Our footer may contain a link to our blog, which may contain the same header links, but the will need absolute urls instead of relative anchors.Please let me know if any of this is possible now.
-
Posted in: We hit Power Elite.