Prevent fixed div from overlapping with footer

I have been trying to find a solution for my fixed div that sticks to the bottom, but nothing seems to work.

My goal is to have the div stop when it reaches the #footer section of the page.

Visit the site

The CSS currently in place gives the div the class .widget.widget_nav_menu. I need a script that can change this class to .widget.widget_nav_menu.fixed_button when it reaches the border of the footer. Is this feasible?

.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%;
}
jqueryhtmlcss

Answer №1

If you're wondering whether JavaScript can determine if a page has reached the bottom, StackOverflow has some helpful answers on this topic:

  • Determining when JavaScript scrolled bottom of page
  • How to Detect if browser window is scrolled to bottom

By following the suggestions in those answers, you can easily update the CSS Class once the bottom of the page is reached:

<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 implement this functionality in WordPress, you'll need to create a custom JavaScript file and enqueue it with jQuery loaded 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' );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalized design for the range input in React

I am working on a React component that includes an input range element. I have used some CSS to style it vertically and currently, it looks like this: https://i.stack.imgur.com/WmQP4.png My goal is to customize the appearance of the slider so that it res ...

htmlcssreactjs

The alignment of the footer navigation is off-center

I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected. .main-footer li { float: left; font-size: 0.85em; padding: 0 0.5em; margin-bottom: 0.5em; } .main-fo ...

csscss-floattext-align

Issue with Materialize Sidenav: Not functional on iOS devices including iPhones, functions correctly on all other devices

My Materialize Sidenav is functioning on all devices except for iPad and iPhone. If you want to check out the code, here is the link to the repository: repo. Take a look at index.html (line 44 down) and js/onloadSetup.js. I attempted adding this in onload ...

javascriptioscssiphonematerialize

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss

Exploring HTML Data with Python String Manipulation

My goal is to use Python to dynamically extract data from an HTML page that is constantly changing. I have identified that the specific data I am interested in is located between a tag that resembles 'abcd>' and another tag. For example: abcd& ...

pythonhtmlscreen-scraping

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

I have been exploring the differences between componentDidMount and componentWillUnmout by experimenting with the following code: class App extends React.Component { constructor(props) { super(props); this.state = { name: "", ...

javascripthtmlreactjsreact-hooksreact-lifecycle

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

Using Javascript to dynamically add SVGs from an array

Having issues with displaying SVG images in a quiz I'm building. I have a folder full of SVGs that correspond to each multiple choice option, but I can't seem to get the pathway right for them to show up properly. I've tried using template l ...

javascripthtmlarrays

Revise tax classification for international customers of the company in WooCommerce

I am currently facing an issue in WooCommerce where I need to set a different tax class for company users with billing addresses outside of Germany. Normally, the tax rate is always 19%, but in this specific case, I require it to be set at 0%. To achieve t ...

phpjqueryajaxwordpresswoocommerce

Unable to retrieve JSON data on Android smartphones

By utilizing a local JSON file, I am fetching data using $.getJSON and displaying it using jQuery mobile. $('body').off('tap').on('tap', 'ul li', function(event) { var jqxhr = $.getJSON("one.json", function(data ...

jqueryjsonajaxjquery-mobile

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and

I have a React application using Fluent UI. Currently, the <Checkbox/> component is displaying with its default colors and behavior like this: I want to customize the color of the checked mark and label (Green for checked mark and brown for label). ...

cssreactjstypescriptfluent-uifluentui-react

Adjusting the width of the rail in Material UI's vertical Slider component in React

After attempting to adjust the width and height of the rail property on the material ui slider I obtained from their website demo, I have encountered an issue with changing the thickness. import React from "react"; import { withStyles, makeStyles } from " ...

javascriptcssreactjsmaterial-ui

Blogger Extension - Cross Domain Communication

As I work on creating a blogger plugin, my goal is to send information from the blog page for analytic purposes and then display the results on the visitor's page. Initially, I tried sending the page content using an ajax call but encountered an error ...

javascriptajaxjquerycross-domainblogger

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

javascriptcssmeteormouseenterspacebars

Discover the top "Most Popular" links/pages on a website

I have several tables that store information. Users can click on the title to view more details. Now, I would like to display a list of the "Most Popular" links (based on hits) on the homepage. Since I am new to this concept, I am not sure how to achieve ...

jquerylinqasp.net-mvc-3ado.net

The message "No Results Found" is displayed in jQuery DataTables when an AJAX request receives a

Currently, my DataTables setup includes the following options: $t = $('#users-table').DataTable({ 'paging' : true, 'searching' : true, 'ordering' : false, 'info' : false, &apos ...

jqueryajaxdatatables

Execute `preventDefault` prior to authenticating the User with Dev

In my index, I have a modal with a user sign-up form. I created a JavaScript function that triggers when the "Save" button is clicked. If users encounter errors, alerts appear in the modal but it redirects to another page. I want the page to stay on the c ...

javascriptjqueryruby-on-railsajax

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

javascriptphpjqueryhtmlcss

Performing an AJAX request using jQuery without specifying the method name in the URL

Is the Page_Load method called if only the page name is specified in the AJAX call URL? $.ajax({ type: "POST", url: "PageName.aspx", //No method name data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: fu ...

jqueryasp.netajax

customizing highcharts title within a popup window

Is there a way to dynamically set the title of a Highcharts chart from an element? Check out my code snippet below: $(function () { var chart; $('#second-chart').highcharts({ chart: { type: 'bar' }, subtitle: { ...

javascriptjqueryhighcharts