Footer stays put as you scroll, peeking out from behind the main content

I'm trying to replicate the sticky-footer effect that can be seen on the website

  1. From what I understand, the footer needs to be fixed in place.
  2. The content should have a higher z-index.
  3. It seems like the body may need a margin-bottom equal to the height of the footer.

If anyone could provide some guidance, I would greatly appreciate it.

My framework is Twitter Bootstrap 4. Here's a basic structure of the markup:

<body>
    <div class="container"> <!-- Content area that scrolls up to reveal the footer -->
        <!-- Place your content here -->
    </div>
    <footer class="footer"> <!-- Initially hidden footer -->
        <div class="container">
            <div class="row">
                <!-- Footer content goes here -->
            </div>
        </div>
    </footer>
</body>
htmlcssfootersticky-footertwitter-bootstrap-4

Answer №1

To ensure your webpage layout is structured correctly, you should create a main content division with a background color that matches your design vision. This will prevent any text overlap issues. Setting the z-index of the main content division to 1 will keep it above other elements on the page, while positioning the footer behind it with a lower z-index (in this case, -1) allows for smooth scrolling functionality.

If you need an example, check out this Fiddle Demo:

HTML:

<div class="main-content">
  <div class="container">
    <div class="row">
      Your main Content Scroll down
    </div>
  </div>
</div>
<footer>
  <div Class="container">
    <div CLass="row">
      Footer Content
    </div>
  </div>
</footer>

CSS:

body{
  padding-bottom:200px;
}
.main-content{
  min-height:200vh;
  background:#fff;
  z-index:1;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:#000;
  color:#fff;
  z-index:-1;
}

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

Adaptive web layout (Adjusting design based on screen size)

I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...

jqueryhtmlcssresponsive-design

Tips for avoiding anchor tag text from being split across two lines when resizing

One issue I am facing is with an anchor tag that displays the name of the logged-in person. The problem arises when resizing the browser window, causing the name to split across two lines. Is there a way to prevent this from happening? ...

htmlcss

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...

javascriptjquerycss

Place text directly below the images for proper alignment

In my current rails app, I am working on the contributors page. Each member's name should be displayed centered beneath their respective images. Any assistance with this would be greatly appreciated. Below is a snippet from my member.html.erb file ...

htmlcssruby-on-rails

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

javascripthtmlcssreactjsjquery-waypoints

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

javascriptjqueryhtmlcssscroll

Using jQuery and AJAX to fetch the return value of a PHP class method

Starting a new project for myself has been quite the learning experience. As someone who isn't the most skilled programmer, I decided to kick things off in PHP. However, I quickly realized that executing PHP functions and class methods through HTML bu ...

javascriptphpjqueryhtmlajax

What causes my variable to show None instead of the current stock price?

I attempted to extract the stock price data from using BeautifulSoup. However, my program is not displaying the stock price and instead showing "None". How can I correctly retrieve the stock price information? My provided code snippet: from bs4 import Bea ...

pythonhtmlbeautifulsoup

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

javascriptpythonhtmlgoogle-app-enginegql

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

javascripthtmlcss

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. https://i.sstatic.net/yZBK7.png to https://i.sstatic.net/LxTtT.png <Dropdown placeholder=&apo ...

javascripthtmlcssreactjssemantic-ui-react

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...

htmlcss

How to keep a window/tab active without physically staying on that specific tab

Whenever I'm watching a video on a website and switch to another tab, the video stops playing. But when I switch back to the original tab, the video resumes. Is there a trick to prevent the video from stopping? I've already tried using scrollInto ...

javascripthtml

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

Modifying Link Hover Colors with CSS and PHP

One of the challenges I am facing is managing a file that contains an array of navigation links. This setup allows me to easily add new links to the navigation menu without manually updating multiple files. However, I am struggling with assigning different ...

phpcss

Setting the background color of a table header to 70% width within a table is achievable

I'm looking to style the th attribute with a bgcolor, but only at a width of 70%. The header reads "Mega Event Offer" and I want to give it a background color as well. However, since its width is large, it's overlapping onto the heading. Is there ...

htmlcss

Tips for aligning a div underneath another div in a centered position

I am attempting to align .rij_lessenrooster below .rij_weekdagen so that it is centered under each day. The teacher advised me to create a column and then try it, but it did not resolve the alignment issue. The .rij_weekdagen consistently appears off to th ...

htmlcssflexbox

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

jquerycss