Superfly menu position via javascript

[becktowery]

Hi,
I’m i’m using Superfly Menu on a few pages and I’d like it to start in a certain place (which I have set up ) but then transition to another spot on page scroll. Basically just closer to the top as my initial position is based on header content. I’m sure this is possible with JavaScript (onScroll, adding/removing class) and I’ve tried a few things but can’t get anything to work. Any ideas?

Thanks!

[becktowery]

OK…I solved it! Here’s what I did for anyone else looking to do this. Set your top offset to where you want it at page load.

Add this class with the height offset you want for scrolling:

.sfmpushtotop{
top: 10vh;
}

Then add this script in Global JS:

jQuery(function($) {
//caches a jQuery object containing the header element
var menupos = $(".sfm-navicon-button");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
menupos.addClass(“sfmpushtotop”);
} else {
menupos.removeClass(“sfmpushtotop”);
}
});
});

[Prasant]

Glad to hear that and thanks a lot for taking out the time to share the solution with community members.

[becktowery]

Ok, so this doesn’t seem to work more than once. Ive tried changing the first line to

jQuery(document).on(‘load’, function(){

with no change. I’m getting a few errors in the console:

Source map error: request failed with status 404
Resource URL: http://www.chattanoogaballet.fused.build/wp-content/themes/pro/framework/dist/js/site/x.js?ver=2.5.5
Source Map URL: x.js.map

Source map error: request failed with status 404
Resource URL: http://www.chattanoogaballet.fused.build/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-body.js?ver=3.5.4
Source Map URL: cs-body.js.map

Source map error: request failed with status 404
Resource URL: http://www.chattanoogaballet.fused.build/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js?ver=3.5.4
Source Map URL: cs-head.js.map

Any thoughts?

[nabeel]

Hey @becktowery,

Your code looks fine however you can add the following code in page’s JS section instead of adding it in Global JS section:

jQuery(function($) {
    $(window).scroll(function() {
        if ( $(window).scrollTop() >= 300) {
        	$(".sfm-navicon-button").addClass("sfmpushtotop");
        } else {
        	$(".sfm-navicon-button").removeClass("sfmpushtotop");
        }
    });
});

Remove your code from Global JS. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!