Turn of Sticky after scrolling with the sub-menu / page-menu feature

Question

I am using the sub menu / page menu functionality found on this page... https://canvastemplate.com/demo crowdfunding single.html I see the "sticky" starts visible in the viewport. Is there any way to stop it from floating at some point? As in, once the viewport scrolls past the end of an article, the menu should stop scrolling. A good example can be seen on that same page above. I would like that menu to stop being "sticky" once it gets to the footer. But right now, it just keeps floating. I at…

SemiColonWeb · Accepted Answer

Hello,

Thanks for your Patience!

For Problem 1:

Add the .scroll-detect class to the .content-wrap DIV.
Add the following JS Code at the bottom of the Page:
[ch_pre]
window.addEventListener('scroll', function() {
let element = document.querySelector('.content-wrap');
let value = window.getComputedStyle(element).getPropertyValue('--cnvs-scroll-percent');
if( value > 97.5 ) {
document.getElementById('page-menu-wrap').classList.add('d-none');
} else {
document.getElementById('page-menu-wrap').classList.remove('d-none');
}

}, {passive: true});
[/ch_pre]

For Problem 2, use the data-pagemenu-breakpoint="0" on the `` tag.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

carabs · Answer

Also, is there any way to keep the menu from collapsing (showing the hamburger ICON) on smaller screens and just show all the links? It gets lost on small screens when just showing the hamburger icon. I want a choice to keep it open.