[LeoParticipant]

Hello,

Could someone perhaps advise me on getting the logo image using the Integrity stack to be absent when scrolled up and to fade in upon scroll down? I’d also like the logo to reappear when returned to the top. I’ve tried this script, but it’s not working:

(function ($) {
$(document).ready(function(){

if ($(‘body’).hasClass(‘home’)) {

hide .x-brand.img first
$(“.x-brand.img”).hide();

fade in .x-brand.img
$(function () {
$(window).scroll(function () {

// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 450) {
$(‘.x-brand.img’).fadeIn();
} else {
$(‘.x-brand.img’).fadeOut();
}
});
});
}

});
}(jQuery));

Am I missing perhaps some supplemental CSS code? Any help would be so appreciated.

Thanks!

[LeoParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! The code you have will only work in the homepage of you page. Please update it and you can make use of this code instead:

(function ($) {
  $(document).ready(function(){

    if ($('body').hasClass('page-id-608')) {

      //hide .x-brand.img first
      $(".x-brand.img").hide();

      // fade in .x-brand.img
      $(function () {
        $(window).scroll(function () {
   
       // set distance user needs to scroll before we start fadeIn
       if ($(this).scrollTop() > 450) {
        $('.x-brand.img').fadeIn();
       } else {
        $('.x-brand.img').fadeOut();
       }
      });
     });
    }

  });
}(jQuery));

Please be very careful when copying and pasting the code. You have to make sure that the quotes are exactly the same. Inavlid php quotes will result to an error which would make the code invalid.

We would loved to know if this has work for you. Thank you.

[LeoParticipant]

This worked perfectly. One last quick question, this page will eventually be the home page. Will I at that point just change ‘page-id-608’ to ‘home’?

I’m so appreciative of your help. Thank you.

[ChristopherModerator]

Hi there,

Yes, please update it to :

(function ($) {
  $(document).ready(function(){

    if ($('body').hasClass('home')) {

      //hide .x-brand.img first
      $(".x-brand.img").hide();

      // fade in .x-brand.img
      $(function () {
        $(window).scroll(function () {
   
       // set distance user needs to scroll before we start fadeIn
       if ($(this).scrollTop() > 450) {
        $('.x-brand.img').fadeIn();
       } else {
        $('.x-brand.img').fadeOut();
       }
      });
     });
    }

  });
}(jQuery));

Thanks.

[Author]

Posts