[trollkarlslivParticipant]

Hi,

I’m setting up a sticky footer on my site that’s supposed to show after a certain amount of scroll on the page. I want it to show when scrolling past a fullscreen revolution slider (that’s the first on the site).

I have set up a content band with shortcodes for the footer. The footer id is #content-band-3. I have made it stick to the bottom with the following CSS:

div#x-content-band-3 {
    position: fixed;
    bottom: 0;
    width: 100%;
}

So far so good. But since this also places the sticky footer on top of the revolution slider, I need to only display it once the visitor has scrolled down a bit. This jsfiddle shows EXACTLY the solution I’m looking for: http://jsfiddle.net/uRN64/362/ except that my footer is wider and taller…

But I haven’t been able to get the javascript to work on my site. What should I place in the Customizer to get this effect? Any input from you guys would be great!

Thanks in advance!

[LelyModerator]

Hi There,

Thanks for posting in.
Please add this on Appearance > Customize > Custom > Edit Global Javascript:

$(function(){
    $(window).scroll(function() {              
        ($(document).scrollTop() + $(window).height()) / $(document).height() > 0.98 ? $('#x-content-band-3').fadeIn() : $('#x-content-band-3').fadeOut();
    });
})

Hope this helps.

[trollkarlslivParticipant]

This reply has been marked as private.

[RupokMember]

Hey there,

Thanks for writing back! When we are okay with few tweaks, we can’t assist you on something that needs in-depth customization. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[trollkarlslivParticipant]

Thank you! I understand. Just wanted to let you know that I finally managed to get the customizer to apply the javascript by adding var $ = jQuery.noConflict(); before the script.

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Romain65Participant]

Hello, (sorry for Google traduction !!)

I have the code below for my footer : is it possible to do appears this footer when scroll THEN fixed it ? What is the code ?

.x-colophon.bottom {
   position: fixed;
   width: 100%;
   bottom: 0;
   padding: 5px 0 3px;
}

I’ve tried with the code below but it doesn’t work…

.x-colophon.bottom {
   position: fixed;
   width: 100%;
   bottom: 0;
   padding: 5px 0 3px;
   visibility: hidden;
   bottom: -70px;
   transition: all 500ms linear;
}

.x-colophon.bottom .x-colophon-visible {
visibility: visible;
bottom: 0;
transition: all 500ms linear;
}

Thanks !

[LelyModerator]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. Does it mean you want the footer hidden on page load then become fixed on scroll? If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Romain65Participant]

Thank you for your response.
I have not found an example site but yes, I want my footer be hidden when the page loads, and appears when I scroll.

Here are the codes for the navbar (it’s ok), and i want the same thing for the footer…
Is it possible ?

CSS for navbar :

.x-navbar {
visibility: hidden;
top: -80px;
transition: all 500ms linear;
}

.x-navbar.x-navbar-visible {
visibility: visible;
top: 0;
transition: all 500ms linear;
}

and JS for navbar :

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

    var boxedClasses = '';

    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      console.log(navbarOffset());

      if ( $(this).scrollTop() >= navbarOffset() ) {
        $navbar.addClass('x-navbar-visible' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-visible' + boxedClasses);
      }

    });

  }

  function navbarOffset() {
    return $('.x-slider-container.below').outerHeight() / 5;
  }

});

I hope you understand, I do not speak very well english… Thanks

[Romain65Participant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please provide us with the URL to your site so that we could check it.

Thank you.

[Romain65Participant]

This reply has been marked as private.

[Romain65Participant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Kindly remove your css and javascript you have added with regards to making your footer sticky.

After that, add the code below in Custom > Edit Global Javascrip in the customizer

jQuery(function($) {
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
     if(scroll > 70) {
          $('.x-colophon.bottom').addClass('fixed-footer');
     }else {
          $('.x-colophon.bottom').removeClass('fixed-footer');
     }
});
});

and add this in Custom > Edit Global CSS

.x-colophon.bottom.fixed-footer {
   position: fixed;
   width: 100%;
   bottom: 0;
   padding: 5px 0 3px;
}

Hope that helps.

[Romain65Participant]

Okay it’s perfect thank you ! And how can I add a transition effect?

[Author]

Posts