Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #574243

    Is there a way to add a class like ‘is-scrolling’ to the header or html element? I need an in-between from the first load to the .header_scrolled class so I can adjust the height and font sizes of a widget in the header.


    Hi thatryan!

    Not sure what you mean but if you provide us with a mockup and let us know what you are trying to achieve on the frontend of the site with a link to your site we will surely help you.



    Hey sorry I missed this reply.

    So once you scroll the header gets a class added of header-scrolled

    It would be very helpful if two more classes were available, one that is header-not-scrolled or something for when nothing has happened yet, and a header-scrolling for when scrolling happens but has not completed yet.

    It helps having to override things less, right now I am overriding the secondary “sub” menu appearance, but when the scrolling happens I have to re-override to undo things. So would be nice to have a class to prepend to my overrides like header-not-scrolled so I can just do that.

    Make sense?



    I don’t know why you need an extra class because if you’re not scrolling yet, you can just use the actual selectors of the elements that you want to modify and on scroll, append the ‘header-scrolled” selector. Anyway, try this in the functions.php file:

    // scrolled or not
    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    	$(window).scroll(function() {
            if($(window).scrollTop() > 0) {
            } else {    

    Use “html-scrolled” if scrolled else use the “html-not-scrolled”.Note that you can also use the “header-scrolled-full” selector when scroll position value is greater than the header container height.

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.