CODEWITHSUNDEEP
jqueryhtmlcss
user2979600
user2979600

Reputation: 17

Make fixed div stop at footer

i know there are other solutions to this problem, but i simply cant get them to work

i have a fixed div that sticks to the bottom. i would like i to stop when it hits the #footer

the site

is have is css so basically i need a script that changes the class from .widget.widget_nav_menu to .widget.widget_nav_menu.fixed_button when is hits the border of the footer

is that possible?

.widget.widget_nav_menu{
  background: none repeat scroll 0 0 #2E3337;
  bottom: 0;
  padding: 25px;
  position: fixed;
  right: 2%;
  color: #707480;
    font-size: 0.8em;
    opacity: 1;
    text-transform: uppercase;
}
.widget.widget_nav_menu.fixed_button {
  margin-right: -210px;
  position: absolute !important;
  top: -180px;
  background: none repeat scroll 0 0 #2E3337;
  padding: 25px;
  right: 2%;
}

Upvotes: 1

Views: 2804

Answers (1)

MackieeE
MackieeE

Reputation: 11862

There's a couple of answers floating around on StackOverflow that answer your question if JavaScript can dectect if the page has hit the bottom or not:

With the help of the above, you change simply change the Class once it has:

<script>
$(function() {
    $(window).scroll(function(){

       //Cache the Footer Widget
       var $footerMenu = $('.widget.widget_nav_menu');

       //Check if it hits the bottom, toggle Relevant Class.
       if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
          $footerMenu.addClass('fixed_button');
       else
          $footerMenu.removeClass('fixed_button');

    });
});
</script>

Demo Fiddle: http://jsfiddle.net/fVKZe/1/

To include this into a WordPress setup, you'll need to add a custom .js file and queue it until jQuery has loaded in WordPress as a dependency.

stickymenu.js 

jQuery(document).ready(function($) {
    $(window).scroll(function(){
        //The Above Footer Widget Code
    });
});

functions.php

function stickyfooter_method() {
    wp_enqueue_script(
        'stickymenu',
         get_stylesheet_directory_uri() . '/js/stickymenu.js',
         array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'stickyfooter_method' );

Upvotes: 4

Related Questions