I am having trouble with the scrollspy component. I could not get it to work at all at first. I now have it working properly, but with kludged code. I started with essentially the default framework css, a sticky header, and some additional widget areas in a 1-page child theme. The back-t-top link worked properly with smooth-scroll but scrollspy did not work at all:
add_action( 'beans_uikit_enqueue_scripts', 'machine_enqueue_uikit_assets' );
function machine_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'scrollspy', 'smooth-scroll' ) );
}
//sticky header:
beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
beans_add_attribute( 'beans_header', 'data-uk-sticky', "{clsactive: 'uk-header-attached', top:-90}" );
// Scrollspy - not working
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "closest: 'li', smoothscroll:{offset:70}" );
// Just smooth-scroll without scrollspy
beans_add_attribute( 'beans_menu_item_link', 'data-uk-smooth-scroll', '{offset: 70}' );
// right footer text:
add_filter( 'beans_footer_credit_right_text_output', 'machine_footer_right_text' );
function machine_footer_right_text() {
return '<a href="#" data-uk-smooth-scroll class="mk-top-button">Back to the Top</a>';
}
// add anchor for back-to-top
add_action( 'beans_body_prepend_markup', 'totop_anchor' );
function totop_anchor() {
?><div id="mk-top"></div><?php
}
In fact, even the links stoped working as normal. - Click the nav, no result. The data tags were showing up properly in the html, they just did not work. Maybe the nested quotes in the non-working scrollspy line caused a problem? Nope. I tried reversing the double/single nesting - no good. Tried removing the offset parameter and just using true, tried including the ulkit with
beans_uikit_enqueue_components( true );
beans_uikit_enqueue_components( true, 'add-ons' );all to no avail. I added what should be the default cls: 'uk-active':
// Scrollspy - semi-working
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li', smoothscroll: true" );That made it partially work. Now the active class was being applied properly, but the scrolling would not work. I ended removing smoothscroll: true, changing the node to the a tag, and adding smoothscroll to it seperately:
// Scrollspy semi-working
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li a'}" );
// Just smooth-scroll without scrollspy
beans_add_attribute( 'beans_menu_item_link', 'data-uk-smooth-scroll', '{offset: 70}' );This works but it is not zen.
One other minor issue. The first link in my nav is to a section below the Hero slideshow. When you scroll to the top of the page, the first menu item should be no longer active. With scrollspy however, it seems that the active link does not become inactive when the detected section scrolls out of view, it becomes inactive when a new section is detected. That meant that the first link, properly, did not become highlighted until you scroll down past the slideshow and the About section comes into view. However, scrolling back up to the top did not un-highlight the about link even though that section is no longer visible. The solution for this was simple and satisfactory enough. I added a link to the page top to the menu and gave it a style of {display:none;} Now, a new section is detected when you scroll to the top, and the about link looses it's active class. I thought I would have to use visiblity:hidden but scrollspy seems to work fine even with display:none.
Hey Jonathan,
It seems like you are adding to actions to your nav items, scrollspy to the li and smooth scroll to your a tag. I think this might well create wonkiness.
Regarding UIkit component, beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' ); needs to be in machine_enqueue_uikit_assets(), it is outside in the code you share.
Regarding your scroll to top, your href in machine_footer_right_text() need to be set to the same as the anchor id, for instance #mk-top.
Hope that helps,
Thank you once again Thierry. For the back to top, I just removed the #mk-top anchor completly since I was not using it (it was left in there from my first pass where I was using it. After reading more in the UIKit documentation, I saw that you don't need an anchor tag at all if you want to scroll to the very top of the page. just targeting # by itself works, and no extra markup.)
I moved the sticky component to where it belongs. I don't see a difference in function but it is definitely cleaner code. I tried to clean up the scrollspy nav again after doing that, thinking maybe the incorrect placement of the enque sticky add-on was also affecting scrollspy somehow, but that did not seem to make a difference.
For the nav, well, no. I am adding the both the scrollspy and the the smoothscroll to the a tag. Note the last example has: closest: 'li a' The earlier examples have closest: 'li'. smoothscroll did not work applied to the li, and with scrollspy applied to the li, the a did not work at all, so since I had to apply both components, I had to apply them to the a tag. This alone is what I expected to work:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li', smoothscroll:{offset:70}}" );This is what does work:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "cls: 'uk-active', closest: 'li a'}" );
beans_add_attribute( 'beans_menu_item_link', 'data-uk-smooth-scroll', '{offset: 70}' );Hey Joanathan,
What I meant is that you don't need to have two lines for that and can combined your scrollpsy and smooth-scroll to avoid confict. You code would be as follow:
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'data-uk-scrollspy-nav', "{cls: 'uk-active', closest: 'li a', smoothscroll: {offset: 70}}" );PS: note that you also forgot a curly bracket in your scrollspy parameters
Yes, putting it all into one line is what I kept trying and could not get to work. I even copied and pasted from examples and still could not get it working, but I guess I never copied the entire line, just the part within the brackets - so of course the missing bracket was the problem. Thanks for that note, it's your PS afterthought that solved the problem. Stupid of me.
Hey Jonathan, glad to hear you back on track, have fun!