Home Forums Fusion sticky header not transparent

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Joshua 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #47731

    levadmin
    Participant

    hi – i would like to have a transparent header when you first come to the site, but then a solid background on the sticky header when you scroll down – how do i do that?

    #47733

    Joshua
    Keymaster

    You can add this to your Custom Javascript in the Customizer, replacing the hex color with what you’d like to use and changing the offset number to the distance you’d like to scroll before changing:

    jQuery(document).ready(function($){       
       var scroll_start = 0;
       var offset = 500;
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $(".navbar").css('background-color', '#f0f0f0');
           } else {
              $('.navbar').css('background-color', 'transparent');
           }
       });
    });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.