Adjust the primary scrolling section of a webpage to halt once it reaches a specific distance from the bottom of the viewport

I am facing a situation where I need to ensure that when scrolling down, a fixed pink menu bar at the bottom of the page does not overlap with the main blue content. This can be achieved by treating the blue content as an iframe positioned 60px from the bottom of the page, all through CSS without using an actual iframe element.

.main-content {
    background-color:blue;
    width:100%;
    height:3000px;
}

.fixed-menu {
    height:50px;
    background-color:pink;
    position:fixed;
    bottom:20px;
    width:100%;
    padding:20px;
}

<div class="container">
    <div class="main-content">

    </div>
    <div class="fixed-menu">
    Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
    </div>
</div>

Has anyone ever encountered a similar requirement? Is it possible to achieve this effect solely through CSS? Check out this example on https://jsfiddle.net/0e98os22/2/r

javascriptjqueryhtmlcss

Answer №1

To create a layout where the content is separated from the fixed menu at the bottom, you can utilize absolute positioning in CSS. By placing your content within an absolute div with top, left, and right set to 0, and bottom at 50px, while also restricting overflow using 'overflow:hidden', you can ensure the two sections do not overlap.

html, body{
  height: 100%;
}

body{
  position: relative;  
  overflow: hidden;
}


.main-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  background: blue;
  overflow: auto;
}

.fixed-menu {
  background-color: pink;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}
<div class="main-content">
  Your main content here.
</div>
<div class="fixed-menu">
  Fixed menu at the bottom.
</div>

Answer №2

Fiddle: https://jsfiddle.net/0e98os22/8/

Snippet:

<div class="container">
  <div class="main-content">
    <img src="http://i.imgur.com/RRUe0Mo.png" />
    <img src="http://i.imgur.com/RRUe0Mo.png" />
    <img src="http://i.imgur.com/RRUe0Mo.png" />
  </div>
  <div class="fixed-menu">
    Fixed menu displayed at the bottom. The main content is positioned above this bar to prevent overlap during scrolling.
  </div>
</div>

CSS:

body, html, .container {
  height: 100%;
  overflow: hidden;
}

.container {
  position: relative;
}

.main-content {
  position: absolute;
  bottom: 100px;
  width: 100%;
  top: 0;
  overflow-y: auto;
}

.main-content img {
  width: 100%;
}

.fixed-menu {
  position:fixed;
  height:50px;
  background-color:pink;
  bottom:0px;
  width:100%;
  padding:20px;
}

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

The HTML to PDF file converter API performs well in a local environment but encounters issues when deployed on node.Js, Express.Js, html-pdf, and Azure Web Services platform

I've developed an API that converts HTML to PDF, and it works flawlessly in my local environment but encounters issues when deployed on Azure app web services. During the process of generating the PDF, the request gets stuck and eventually times out, ...

javascriptnode.jsexpressazure-web-app-servicehtml-pdf

Unable to bring in Vue component from NPM module

Hello there, I recently developed my own npm package for a navigation bar and I need to incorporate it into my main codebase. Currently, I am utilizing vue @components but I am struggling with integrating the imported component. If anyone has insight on h ...

javascripttypescriptnpmwebpackvue.js

Having trouble obtaining search parameters in page.tsx with Next.js 13

Currently, I am in the process of developing a Next.js project with the Next 13 page router. I am facing an issue where I need to access the search parameters from the server component. export default async function Home({ params, searchParams, }: { ...

javascriptreactjstypescriptnext.jsnext.js13

Adjusting the image to fit the container based on its shorter side, regardless of the image's orientation

I have a square container with a predetermined size. I want to place an image inside the container so that its smaller side fits perfectly with the parent container, while the larger side extends beyond the edges of the container without distorting the ima ...

htmlcssimageresponsive

Having trouble accessing data beyond the login page using Node/Express

Currently in an unusual situation. I am developing a backend and frontend that connects to a third-party RESTFUL API managing some hardware. The third-party API is hosted on your local system as a webserver, meaning HTTP requests are directed to "localhost ...

javascriptnode.jshttpexpress

Is there a way to display a specific dropdown menu depending on the checkbox that is selected?

I have a bunch of checkbox items, including one labeled nocalls, as well as a couple of dropdownlist boxes. Here are the dropdown boxes: <tr> <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</ ...

javascriptasp.net

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

csshtml

"Struggling with solving an error in METEOR REACT SEARCH and DISPLAY upon user input onChange? Let

Here is the input code snippet: Title: <input type="text" ref="searchTitle" onChange={this.searchTitle}/> This function handles the onChange event: searchTitle(event) { this.setState({ show_article_editable_list: <Article_Editab ...

javascriptreactjsmeteormeteor-react

How can the error within a promise be captured when using resolve()?

Check out the code snippet below: userUpdate(req: Request, res: Response) { this.userTaskObj.userUpdate(req.params.id, req.body).then(() => { res.status(200).json({ status: 'OK', message: 'User updated', ...

javascriptnode.jsexpresspromisees6-promise

What is the best method to remove the gap between my two horizontal div elements?

Is there a way to eliminate the small space between my two horizontal sections here? I've already attempted using margin: 0px; and padding: 0px; on the container, but it doesn't seem to be effective. Any assistance would be greatly appreciated! ...

htmlcss

Understanding the scope within a .when .done function in jQuery

I'm currently grappling with accessing a variable from within a .when.done function. Take a look at this illustrative example: var colviews = { 1: true, 2: true, 3: false } $.when( $.getScript( "/mckinney_images/jquery.tablesorter. ...

javascriptjquery

Operate on Nested JSON Arrays

I have the following JSON array: var salesData = [ { "products": "Cars", "solddate" : "2022-01-01", "noofitems" : " ...

javascriptjqueryarraysjson

Using HTML and CSS to Position Text Within an Image

Is there a way to position an image next to specific points on the screen so that it remains in the same place regardless of screen size? Here is what I am trying to achieve: https://i.stack.imgur.com/A5cop.png Using HTML, this is my desired setup: < ...

htmlcss

The image in the row wrap container spills over slightly

Even though all the items within that container are wrapped properly as article, there is an issue with the right border of the image overflowing the container's article border. My temporary solution involves adding a mediaquery @1041px and a small a ...

htmlcssfigure

Utilizing diverse values retrieved from HTML data attributes

*UPDATE Within my HTML, I have a list titled "#wordlist" that contains the words for my game, along with corresponding audio and images for each word. Everything is functioning correctly. As there will be multiple versions of the game, I've been tas ...

javascriptjqueryhtmlvariables

Encountered an unhandled runtime error: TypeError - the function destroy is not recognized

While working with Next.js and attempting to create a component, I encountered an Unhandled Runtime Error stating "TypeError: destroy is not a function" when using useEffect. "use client" import { useEffect, useState} from "react"; exp ...

javascriptreactjsnext.jsnext.js13

The <div> element is not displaying the JSON response when using Ajax

I have created a basic login form and I am attempting to validate it using an AJAX call. The validation process is successful, but the issue arises when the correct email or password is entered. Instead of displaying the JSON success or error message in a ...

javascriptphpjqueryjsonajax

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

javascriptangularjstypescript

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

javascripthtmlcssbootstrap-5