JQuery or JS sticky footer

  • I’ve used CSS code for sticky footer successfully before until Word Press. I implemented it on my new site and it frustrates my goal. I still don’t have a footer that stays at the bottom of the page.

    I even tried to “pusher div” version and that didn’t work either.

    Does anyone have any experience with a JQuery solution?

    This is the one I have in mind:
    https://css-tricks.com/snippets/jquery/jquery-sticky-footer/

    From what I know about JQuery you need a “library” or API to use it.

    Any input would be greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This always works for me, no need for JS: https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    this is how I do sticky footers:

    https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

    Thread Starter tecombs

    (@tecombs)

    Andrew, the one you propose is something like the traditional version that I’ve tried. I even found and tried one that uses a pusher div. No joy.

    I appreciate you dropping in and your effort.

    Thanks.

    Thread Starter tecombs

    (@tecombs)

    Sterdata, I tried your unique approach from Walton’s page and nothing. The same problem persists.

    I tried it locally and didn’t put it up at the site.

    I’m double darned reasonably sure that I’m fighting something in the PHP code of the theme. Using Walton’s fix it was easy to just put the class in the <body <?php body_class( ‘site’ ); ?>> tag like so.

    I watched everything operate through Inspect Element to no avail.

    I appreciate your input also.

    Thanks.

    There’s just one trick left and its JS. The other option is a real production effort using JQuery.

    But I gotta get that footer down in its place.

    Thread Starter tecombs

    (@tecombs)

    Just so you know, a light jQuery version of a sticky footer finally worked. It is by Chris Coyier, a JS wizard of sorts. However it is not without shortcomings, it promotes a margin-top equal to the footer’s height making it some distance to the footer.

    Taking a hint from one the posters at his site I added margin-top -250px; to it and thought that fixed it. BUT all it did was reintroduce the original footer problem all over again.

    Sigh.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘JQuery or JS sticky footer’ is closed to new replies.