Hidden body text occurs when the div element is set to be sticky at the bottom

Question

Hidden body text occurs when the div element is set to be sticky at the bottom

I have been trying to resolve an issue with a sticky element at the bottom of a page using javascript/jquery. However, the sticky element is hiding the body text. I want to display all body text without it being hidden by the sticky element, but I can't seem to pinpoint the exact problem in my code. Can someone please provide suggestions on what may be causing this issue?

Check out the CodePen demo for reference

Javascript:

var link = $('#navbar');
var offset = link.offset();
var top = offset.top;
var left = offset.left;
var bottom = $(window).height() - top - link.height();
bottom = offset.top - bottom;
var right = $(window).width() - link.width();
right = offset.left - right;

CSS:

#navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;

  overflow: hidden;
  background-color: #333;
}

javascript jquery html css

Answer 1

Answer №1

To achieve the desired layout, assign the value of the outerHeight() jQuery function for the #navbar to the .content element as the margin-bottom property using the css() jQuery method.

var link = $('#navbar');
var content = $('.content');
var linkHeight = link.outerHeight();
content.css({
  "margin-bottom": linkHeight
});

body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: relative;
  bottom: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>
<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text...

Alternatively, you can utilize the position:sticky CSS property if browser support is not an issue.

body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  position: sticky;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: relative;
  bottom: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see...

Answer 2

To achieve the desired layout, assign the value of the outerHeight() jQuery function for the #navbar to the .content element as the margin-bottom property using the css() jQuery method.

var link = $('#navbar');
var content = $('.content');
var linkHeight = link.outerHeight();
content.css({
  "margin-bottom": linkHeight
});

body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: relative;
  bottom: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>
<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text...

Alternatively, you can utilize the position:sticky CSS property if browser support is not an issue.

body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  position: sticky;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: relative;
  bottom: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see...

Answer 3

Answer №2

It's simple, you can achieve this by applying the margin-bottom property in your CSS code

<div class="container" style="margin-bottom: 100px">

Answer 4

It's simple, you can achieve this by applying the margin-bottom property in your CSS code

<div class="container" style="margin-bottom: 100px">

Answer 5

Answer №3

If you want to add some space at the bottom of the content div, consider using a padding-bottom value.

.content {
    padding-bottom: 88px;   
}

However, be mindful that adding padding may cause the text to wrap and change the height of the div. In such cases, use a media query to adjust the layout accordingly.

$(".content").css("padding-bottom",$("#navbar").height());

Answer 6

If you want to add some space at the bottom of the content div, consider using a padding-bottom value.

.content {
    padding-bottom: 88px;   
}

However, be mindful that adding padding may cause the text to wrap and change the height of the div. In such cases, use a media query to adjust the layout accordingly.

$(".content").css("padding-bottom",$("#navbar").height());

Answer 7

Answer №4

To achieve your desired layout, apply a margin-bottom using the following method:

$(".main-section").css("margin-bottom",$("#fixed-nav").height());

This piece of code dynamically adjusts the content's margin-bottom based on the fixed navigation bar's height. Give it a try and see if it meets your requirements.

Let me know if you need further assistance.

Answer 8

To achieve your desired layout, apply a margin-bottom using the following method:

$(".main-section").css("margin-bottom",$("#fixed-nav").height());

This piece of code dynamically adjusts the content's margin-bottom based on the fixed navigation bar's height. Give it a try and see if it meets your requirements.

Let me know if you need further assistance.

Hidden body text occurs when the div element is set to be sticky at the bottom

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to create a fading effect on an image using a border-radius of 50%?

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

Troubleshooting Cufon Compatibility with Internet Explorer - Investigating a CSS Problem

Server Sent Events not being received by client from Express.js server

Struggling with Incorporating Variables from Jquery?

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

Guide on incorporating a Bootstrap date time picker in an MVC view

Commitments when using a function as an argument

Experiencing a lack of content in an Express response

Having trouble adding a new user in Knockoutjs

The Vue component fails to refresh when the state in the store undergoes changes

Use vtip jQuery for showcasing titles

Display and conceal interactive jQuery UI Dialogs

Comparison between Bootstrap dropdowns and adjusting document height dynamically

Attempting to create a multi-page slider using a combination of CSS and JavaScript

JavaScript has hindered cross-origin response due to Cross-Origin Read Blocking (CORB)

The functionality of the Bootstrap dropdown or radio input type is not functioning correctly

If a user is already logged in, I would like to automatically redirect them to the dashboard when attempting to access the login route in Express.js

Creating a consolidated HTML table by extracting and comparing data from various JSON files