Docs

[WoodWatchCo]

How can I retain the full screen hero image on my homepage and only display the sticky social share footer bar AFTER scroll?

[WoodWatchCo]

This reply has been marked as private.

[Rupok]

Hi there,

Let’s change your following code :

.x-colophon.bottom {
  bottom: 0;
  position: fixed;
  width: 100%;
}

to this :

.x-colophon.bottom {
  bottom: 0;
  position: relative;
  width: 100%;
}

.x-colophon.bottom.fixed-footer {
  position: fixed;
}

Then add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        footer = $('.x-colophon.bottom');

    if (scrollPos > 300) {
      footer.addClass('fixed-footer');
    } else {
      footer.removeClass('fixed-footer');
    }
  });
});

Hope this helps.

Cheers!

[Author]

Posts