Footer not consistently unfixing

[synthwavenomad]

Hello,

First of thank you for such an exceptional plugin, I rate it very highly!

I am having an issue at the moment in regards to the unfixing, the site in question is http://www.hypemarketing.co.uk/
Upon scrolling it will trigger the footer at the bottom of the screen, then when you get to the bottom it snaps in correctly, but on any other page on the site this isn't occurring e.g. http://hypemarketing.co.uk/seo/ ?

Also on other pages (I am still working on) it snaps to the footer too early i.e. http://hypemarketing.co.uk/project/beacon-finance/ ?

For a bit more information this is a WordPress Site, and built on-top of the DIVI Framework from Elegant themes.

If you could please help me troubleshoot/ solve this issue it would be greatly appreciated. :)

[bigspotteddog]

My quick guess, there is dynamic content on the other pages. Change the limit attribute to a function:

jQuery('#Sticky-Footer').scrollToFixed( {
    bottom: 0,
    limit: function() { return jQuery('#Sticky-Footer').offset().top; }
});

[synthwavenomad]

Hi bigspotteddog, thank you for your quick response, I have added the snippet and although now it seems to snap correctly it is flickering as you scroll up/ or down. URL: http://hypemarketing.co.uk/

Below is my js

<script> //This is for the fixed footer jQuery('#Sticky-Footer').scrollToFixed( { bottom: 0, limit: function() { return jQuery('#Sticky-Footer').offset().top; } }); jQuery(window).scroll(function() { var scroll = jQuery(this).scrollTop(); if (scroll >= 5) { jQuery('#Sticky-Footer').removeClass('HIDE'); } }); jQuery(window).scroll(function() { var scroll = jQuery(this).scrollTop(); if (scroll <= 5) { jQuery('#Sticky-Footer').addClass('HIDE'); } }); //This is for the white background jQuery('#WhiteBack').scrollToFixed( { bottom: 0, limit: function() { return jQuery('#WhiteBack').offset().top; } }); jQuery(window).scroll(function() { var scroll = jQuery(this).scrollTop(); if (scroll >= 5) { jQuery('#WhiteBack').removeClass('HIDE'); } }); jQuery(window).scroll(function() { var scroll = jQuery(this).scrollTop(); if (scroll <= 5) { jQuery('#WhiteBack').addClass('HIDE'); } }); </script>

[synthwavenomad]

Also sorry I have moved it over to a dev site: http://dev.hypemarketing.uk/

[synthwavenomad]

Bump

[bigspotteddog]

Looks like you solved it? I do not see a flicker on http://hypemarketing.co.uk/seo or http://dev.hypemarketing.uk/seo.

[synthwavenomad]

Hi,

Sorry no, I was trying to troubleshoot when you must have looked, check
now.

Kind regards,

On 20 June 2016 at 13:51, bigspotteddog [email protected] wrote:

Looks like you solved it? I do not see a flicker on
http://hypemarketing.co.uk/seo or http://dev.hypemarketing.uk/seo.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#215 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ATB5Ts1HLR9vybqjE-oP9clWIz9A3pFgks5qNoy4gaJpZM4I2ZWa
.

[synthwavenomad]

check the dev site.

[bigspotteddog]

It looks like two elements are called with scrolltofixed: #WhiteBlack and #Sticky-Footer.

#Sticky-Footer is nested within #WhiteBlack. They are probably fighting with each other.

[synthwavenomad]

Hi,

I have removed the #WhiteBack,

So now it is just #Sticky-Footer,

This is my .js

jQuery(document).ready(function($) {
//This is for the fixed footer
jQuery('#Sticky-Footer').scrollToFixed( {
bottom: 0,
limit: function () { return jQuery('#Sticky-Footer').offset().top; }
});
jQuery(window).scroll(function() {
var scroll = jQuery(this).scrollTop();
if (scroll >= 5) {
jQuery('#Sticky-Footer').removeClass('HIDE');
}
});
jQuery(window).scroll(function() {
var scroll = jQuery(this).scrollTop();
if (scroll <= 5) {
jQuery('#Sticky-Footer').addClass('HIDE');
}
});
})

I can provide access details if that would help? If so where would you like
me to send them too?

Kind regards

On 20 June 2016 at 14:36, bigspotteddog [email protected] wrote:

It looks like two elements are called with scrolltofixed: #WhiteBlack and
#Sticky-Footer.

#Sticky-Footer is nested within @whiteblack
https://github.com/WhiteBlack. They are probably fighting with each
other.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#215 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ATB5To6UUW1iNOuvzeibwTQ73TvN0aqBks5qNpdCgaJpZM4I2ZWa
.

[bigspotteddog]

Comment out the .scroll listeners to rule them out as a possible cause. If it does not flicker when they are no longer involved, they are the culprit; otherwise, there is something going on with the layout and possibly other events on the page.

[synthwavenomad]

Hi, thank you for your support so far, sadly I tried commenting them out and still occurring. Do you think there is anyway of resolving this?

[bigspotteddog]

Yes, it is solvable. It is a matter of finding what is doing it. There is something dynamic going on with the page that is causing the flicker. Eliminating all events to get to a properly functioning footer, then bringing them back one-by-one will tell you which event is causing the issue.

[synthwavenomad]

I have to say you have lost me there, I am not to clear on what are the events etc.
Could I perhaps give you temp access?

[bigspotteddog]

The basic gist is, the footer works on the typical web page and even on the index page on your site. There is something on the subsequent pages that is causing the footer to flicker. I am assuming some dynamic event, but it could be something else in the layout.

Unfortunately, I do not have the time to debug what is going on with the pages that is causing the flicker. I can support you by answering questions you might have.

I think the approach should be to trim down the page to get to back to basics, get the footer working as desired, then build back up. Along the way you will discover what on the page is causing the flicker. You can even start with the index page if it is working as you want it to.