Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

I need help with making a navigation bar stick to the bottom of the viewport without overlapping the fixed-height sticky footer.

Here is the basic markup for reference:

<div id="wrap">
  <div id="main"></div>
</div>
<div id="footer"></div>
<div id="command-bar"></div>

The CSS code can be found on cssstickyfooter.com.

You can view an example at http://jsfiddle.net/z2C5S/2/.

Latest Update

I am making progress with the JavaScript code, but there is still some slight overlap issue when scrolling back up very slowly (http://jsfiddle.net/z2C5S/16)

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    var weOverlappedFooter = ((windowHeight + scrollTop) >= (footerOffset + 40)); // + the height of the command bar

    $("p").html("Overlapped: " + weOverlappedFooter);

    if (weOverlappedFooter) {
      $("#command-bar").removeClass("affix-bottom");
    } else {
      $("#command-bar").addClass("affix-bottom");
    }
  };

  $(window).scroll(function () {
    setCommandBarPosition();
  });

  setCommandBarPosition();
});

Answer №1

My approach to this issue is as follows:

Check out my solution on JSFiddle

The solution involves adding a secondary navigation bar that mimics the primary one and placing it within the footer. By giving the footer a higher z-index than the main navigation, when you scroll down, the footer and secondary nav will cover up the main navigation.

<div id="wrap">
    <div id="main"></div>
</div>

<div id="footer>
    <div id="second-command"></div>
</div>
<div id="command-bar"></div>

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    min-height: 800px
}
/* must be the same height as the footer */
#footer {
    position: relative;
    margin-top: -180px;
    /* negative value of footer height */
    height: 180px;
    clear:both;
    background-color: #999;
    z-index:2;
}
/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
    /* thank you Erik J - negate effect of float*/
}

#command-bar {
   position: fixed;
   bottom: 0px;
   left: 0;
   right: 0;
   height: 40px;
   background-color: #000;
   z-index:1;
}

#second-command {
  height:40px;
  width:100%;
  background-color:blue;
}

While there may be a slight overlap in certain sections, this CSS method is the simplest one I am aware of.

Answer №2

After some adjustments, I finally achieved the desired outcome.

I needed to modify my HTML structure so that the command bar was contained within the main wrapper div. This ensured that on smaller screens where no scrolling was needed, the command bar would stay on top without causing a scroll bar to appear.

<div id="wrap">
  <div id="command-bar">
    <p></p>
  </div>
  <div id="main"></div>
</div>
<div id="footer"></div>

The code below adjusts the position of the command bar based on the page's scroll position. It checks if the viewport overlaps with the footer while scrolling:

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top,
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        commandBarHeight = $("#command-bar").height(),
        overlapsFooter = ((windowHeight + scrollTop - commandBarHeight) >= footerOffset);

    $("p").html("Overlapped: " + overlapsFooter);

    if (overlapsFooter) {
      $("#command-bar").removeClass("affix-bottom");
    } else {
      $("#command-bar").addClass("affix-bottom");
    }
  };

  $(window).scroll(function () {
    setCommandBarPosition();
  });

  setCommandBarPosition();
});

In addition to the sticky footer CSS, we ensure that the command bar is set to absolute position when it reaches the footer:

#command-bar {
  bottom: 180px;
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  z-index: 1;
}
p {
  color: white;
}
#command-bar.affix-bottom {
  position: fixed;
  bottom: 0;
}

View the working demo at http://jsfiddle.net/benfosterdev/TKMaa.

Answer №3

Unfortunately, the answer provided by @BenFoster didn't quite solve my issue. The variable weOverlappedFooter never returned true, possibly due to me positioning the left bar using "top:" instead of "bottom" in the CSS.

To calculate webOverlap, I implemented the following code snippet:

    footerOffset = $("footer").offset().top
    commandBarTop = 30; 
    commandBarBottom = $("#command-bar").outerHeight( true)+navBarTop+$(window).scrollTop();
    weOverlappedFooter = ((commandBarBottom) >= footerOffset);

As for the CSS:

affix-bottom {
    position:absolute;
    top:initial;
    bottom:40px;
}

Other than that, I followed Ben's solution as outlined above.

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

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

Masonry style attempted for posts but did not produce desired outcome

I've been experimenting with different methods to achieve a masonry style layout for my posts. So far, using float:left seems to work almost perfectly, but occasionally there are gaps between the posts. I'm on the lookout for a solid solution to ...

Getting the user's language in PhoneGap can be done in a variety of ways

I attempted to retrieve the language value of the device using the globalization plugin. I followed all installation procedures, read through the documentation, and searched for answers on this platform, but unfortunately, none of them provided the solutio ...

Using Codeigniter to fetch a PHP array in an AJAX success callback

I have implemented a jQuery script to send the value selected from a dropdown menu to my controller. The controller then calls a function in my model to execute a query using this value, and retrieve an array of results from the database. These results are ...

Is there a way to incorporate the results from a website into my own site using Ajax or a simpler method if Ajax is not an option?

I am currently working on a website that requires access to a large amount of dynamic data. However, I do not have the resources to store this data on my server like many other websites do. Let me illustrate this with an example. Imagine a website called ...

Error: jQuery is unable to access the property 'xxx' because it is undefined

While attempting to make a post request from the site to the server with user input data, I encountered an error message saying TypeError: Cannot read property 'vehicle' of undefined as the response. Here is the HTML and script data: <!DOCTY ...

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

Javascript error - SyntaxError: unexpected token '}' after property list is missing

In my code snippet below: var UserCharacter = { UserID: util.getCookie('u_u'); userUsingThisCharacter: function() { var data = {}; data.UserID = UserCharacter.UserID; $.ajax({ type: "GET", url: util.API_URL + "charact ...

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

The JSON file is not filling the options in the dropdown menu

procedure Add the objects from the dropdown into the dropdown menu. The Json file is located in root/ajax/.json and the working file is stored in root/.html. Problem: None of the objects from the JSON file are appearing in the dropdown menu. I attempted ...

Transforming nested JSON files into nested jQuery divs

Is it possible to iterate through two JSON files that have a parent-child relationship based on simple ID primary and foreign keys? Can we then display the data in a list of divs with the following characteristics: Hierarchical - child divs should only a ...

This jQuery ajax request is returning a readyState of 1 or an incorrect data type

I am currently troubleshooting an issue with the ajax response in my Wordpress plugin script. Whenever I try to retrieve a json file using jQuery.ajax, I receive {readyState: 1} as the result. Even when setting async: false, the response is always plain te ...

Tips for designing a sophisticated "tag addition" feature

Currently, I am enhancing my website's news system and want to incorporate tags. My goal is to allow users to submit tags that will be added to an array (hidden field) within the form. I aim to add tags individually so they can all be included in the ...

Cancel the use of the $.each method when the specified variable is located

Currently, I am utilizing a $.each method to search through a JSON in order to find a specific variable. Here is the code snippet I am working with: $.each(heroes_json.heroes, function(key, val){ if(val.id == hero){ hero = val.localized_name; ...

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

Resize Pictures in Carousel for Smartphones

Currently, I am in the process of optimizing my website for mobile devices. The NivoSlider, which is used throughout the site, does not seem to scale well on smaller screens. Despite trying various methods in the mobile section of my stylesheet such as " ...

Securing a string in Spring MVC using @RequestBody with Integer variableencryption

How can I safeguard the variable Integer number in the container WrapperClass to only accept a string input instead of a number? Code: @RequestMapping(value = "MyOwnURL", method = RequestMethod.POST) public @ResponseBody ResponseSomething creat ...

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Currently, I am working on creating a navigation bar using React. This navigation bar consists of multiple navigation items. The requirement is that when a user clicks on a particular navigation item, the class 'active' should be applied to that ...