Display only the background image or color behind a stationary element

Our website features a header with a fixed position that remains at the top of the page while scrolling. The product team has requested a gap or margin between this fixed element and the top navbar.

However, when we implemented this gap, users started noticing the elements scrolling away above the fixed header. To illustrate this issue, I have created a demonstration on jsfiddle:

https://jsfiddle.net/9n50o567/

As you scroll down, you can see the grey sections appearing above the light-blue header while scrolling.

Is there a way to conceal this from the user? We want only the background color or image to be visible above the fixed element, masking the elements that are scrolling away.

We attempted to create a div with the same color as the body background, but this method failed when a background image was present. Another approach we tried was using jQuery to identify the elements in that section and hide them as they scroll, but this caused issues with elements larger than the header disappearing prematurely.

If this explanation is unclear, please feel free to ask any questions for further clarification.

javascriptjqueryhtmlcss

Answer №1

This method may not be flawless, but it works well for changing colors. When it comes to background images, the process can be a bit trickier.

You can create a positioned pseudo-element on the <body> element that inherits the background color of the body, which can be effective.

body {
  background: red;
  position: relative;
}
body::before {
  content: '';
  height: 25px;
  display: block;
  width: 100%;
  background: inherit;
  position: fixed;
  top: 0;
  left: 0;
}
.header {
  background-color: #ccffff;
  height: 300px;
  width: 500px;
  border: 1px solid black;
  position: fixed;
  top: 25px;
  left: 8px;
}
.push {
  height: 335px;
}
.section {
  background-color: #cccccc;
  height: 300px;
  width: 500px;
  border: 1px solid black;
  margin-bottom: 15px;
  z-index: 10;
}
<div class="header"></div>

<div class="push"></div>

<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

View the JSfiddle Demo

Check out this fiddle for background images (using background-attachment:fixed) - Visit the Fiddle

Answer №2

Utilize a div as a spacer with the class name (.headergap) as shown below.

Css:

.headergap{
  background-color: #cccccc;
  position:fixed;
  top:0px;
  height: 25px;
  width: 100%;
}

.header {
  background-color:#ccffff;
  height:300px;
  width:500px;
  border:1px solid black;
  position:fixed;
  top:25px;
  left:8px;
}

.push {
  height:335px;
}

.section {
   background-color: #cccccc;
   height:300px;
   width:500px;
   border:1px solid black;
   margin-bottom:15px
}

Html:

<div class="headergap"></div>
<div class="header"></div>

<div class="push"></div>

<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

View fiddle: https://jsfiddle.net/6bhhn869/

Answer №3

Improved code

Instead of using vh for timing, consider using JavaScript to dynamically calculate the height and apply it to the in-wrap element.

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

Troubleshooting: Resolving the Issue of Undefined Property Reading Error

I am currently working on a code snippet to render filtered data: const tasks = [{ task: "Complete homework", description: "Math and Science assignments." }, { task: "Walk the dog", description: "Take him for a stroll in the park." }, { ...

javascript

Tips for creating a fading effect when hovering over a div element

Hello, I am currently working on a project where I have a span that displays over an image on hover. I would like to add a bit of javascript or css transitions to make this div fade in to about 0.8 opacity when hovered over, and then fade back to 0 opacity ...

javascriptjqueryhtmlcss

Creating a file logging system with log4js to capture Console logs

Is there a way to automatically log all console logs, including failed expectations and exceptions, to a file without using try and catch in JavaScript? In Java's LOG4j, the rootlogger feature does this by default. Is there a similar functionality ava ...

javascripttypescriptprotractorlog4js-node

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

csssassmaterial-ui

What is the most effective method for utilizing JSON as a database?

For my upcoming offline mobile web app project, I am considering using JSON to mirror some of my database tables and storing the data in localStorage. (Although Web SQL Database is an option, its future-proofing capabilities are questionable.) Initially, ...

javascriptjsonweb-applications

When transferring files to Azure Blob Storage in segments using a SAS URL, I encountered a 403 error

Using Python, I am generating a SAS URL. An example of a generated SAS URL is: https://testvideos.blob.core.windows.net/testvideos/user_125/video_125/test.mp4?se=2023-05-14T11%3A02%3A59Z&sp=rc&sv=2022-11-02&sr=b&sig=7o8tNK508ekXy9JpahWBsfdf ...

javascriptazurefile-uploadazure-blob-storage

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

cssangularangular-material

Encountering an issue following the installation and integration of an npm module within a Meteor

I recently started a project using the latest version of Meteor. I added a new package by running the command: meteor npm install --save name_of_package Since this package is meant for the client side, I created a file called mypackage.js inside the /cli ...

javascriptmeteornpm

What is the purpose of the Condition being executed in the screep tutorial?

Lately, I've been heavily focused on Python programming but recently delved into the realm of Screeps and Javascript. As part of a tutorial, there is this code snippet that moves a creep towards an energy source to harvest it: if(creep.store.getFreeC ...

javascriptscreeps

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

javascriptjqueryhtmlcssjqgrid

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

What could be causing my page to refresh every time I press the enter key?

Below is the Jquery code I have implemented for my website. $(document).ready(function() { $('#val').click(function() { var toAdd = $("input[name=message]").val(); $('#messages').append("<p>"+toAdd+"</p>"); $(&a ...

jqueryreloadenter

Locate a specific element by utilizing xpath

Recently, I encountered a coding issue that has been puzzling me. Here's the html snippet in question: <div class="Main"> <div> <div class="display">First:</div> <div class="price">$0.01</div> ...

javahtmlseleniumxpath

The replace method in JavaScript can only be used once

I'm trying to find a way to swap one string (str1) with another string (str2) whenever str1 appears in a particular div. Here's what I have managed to come up with so far: <script type="text/javascript"> $(window).load(function(){ var s ...

javascriptjqueryhtmldom

JavaScript Auto-Closing Modal Pop-Up in HTML

I am looking to implement a feature similar to what is seen on Banks or American Express websites, where a MODAL Popup notifies users that their session is about to expire. In addition to this, I would like to include an "Auto-Close" Popup event that will ...

c#javascriptjqueryasp.nethtml

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

htmlcsspositionalignmentvertical-alignment

Passing a PHP array to a JavaScript function using a button click event in an HTML form

It seems there was some confusion in my approach. I'm working with a datatable that has an edit button at the end. Clicking on this button opens a modal, and I want to pass the data from the table to the modal. While I can send it as a single variabl ...

javascriptphphtmlarraysbootstrap-modal

Dynamic Weight feature in Prestashop allows for automatically adjusting shipping costs

I'm curious about displaying the dynamic weight of each product combination on my product page. Currently, I have something like this: {l s='Weight: ' js=1}{sprintf("%1\$u",$product->weight)}&nbsp{Configuration::get('PS_WEI ...

javascriptphpajaxprestashop

Can we specify the inherit value for font family on an element to ensure consistent style when the specified font is not available?

Suppose I have a page with the following HTML content: <body style="font-family:Helvetica"> <span style="font-family:Segue">Hello World</span> </body> Would it be considered valid to set the font family of the span to Segue, ...

htmlcss

How can I create a fading trail effect in Three.js that diminishes over time?

I am interested in achieving a similar effect to the example I found on this website: However, my goal is to have the old trail gradually fade into the background over time instead of cluttering the screen with persistent marks. I discovered that by usin ...

javascriptthree.js