Delaying Sticky Header in Avada Wordpress Theme

JavaScript
1

Avada support couldn’t help me with this but I feel like this should be an easy fix. The sticky header replaces the default header as soon as you begin to scroll. I’d like to delay the appearance of the sticky header until the user scrolls down about 300 pixels. After Googling a bit, I saw that the some had suggested changing the javascript where it says scrollTop ( ) > 1 or scroll_position > 1 - changing the 1 to a 300.

I’ve combed the main.js and avada-header.js (both have code for the sticky header) but haven’t found those pieces or code or any other that I can identify as possibilities for changing the variable.

Here the website I’m working on http://cantria.org/access-practice/

Any ideas on what I can look for to make the change? or code I could add to the child theme to make the delay happen?

Thanks,

Andy

2

Until one of the Js experts turn up and answers the question properly how about just delaying the header with some css?

e.g.

.fusion-is-sticky  {
opacity:0;
animation:mySlide 1s linear 2s forwards; 
}

@keyframes mySlide {
  from {opacity:0}
    to {opacity:1}
}

The js is adding a class of ‘fusion-is-sticky’ when the header is sticky so try searching the js for that class and you should find the relevant js.

3

Thanks PaulOB! The CSS works and I’ll use it for now.

It would be better to be able to choose the point it appears by scroll length, but my scouring the .js files hasn’t revealed anything yet. fusion-is-sticky is in the code a lot but where to make a change doesn’t look obvious to me. But I’ll keep looking.

Thanks again!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.