Looking for a way to conceal the scrolling content within a div beneath a transparent header? Seeking

This particular question has been asked multiple times, and after careful consideration, I found a solution that closely aligns with my scenario:

Hide content underneath a transparent div while scrolling

The crux of the issue is that the content div is manipulated via JavaScript.

My challenge lies in having a fixed header set at 155px. The header is transparent, and when the text within the content div reaches this header, it should disappear. Due to complex transparency layers and overlay backgrounds on the header, using a masking solution isn't viable. The objective is for the content text to completely vanish upon reaching the header, rather than going behind it.

Scroll down to observe the current behavior. Presently, when scrolling, the text covers the header until the scrollbar surpasses the header position.

Take a look at the JS Fiddle version: https://jsfiddle.net/b5nyohr5/5/

javascriptjqueryhtmlcss

Answer №1

Do you have a specific reason for keeping your fixed header within the same container as the rest of the content?

<div class="fixedHeader" style="position: fixed; display: block; width: 100%;">
</div>
<div class="contentContainer" style="position: relative; display: block;">
</div>

Wouldn't this setup still result in the content scrolling beneath the header?

Answer №2

After some tinkering, I managed to tweak Trevin Avery's code to fit my needs better. I removed the variable maxScroll from the Javascript completely as I didn't require the scrollable content to be completely pushed out of view like his script does.

If you want to see it in action, check out the demo - resize your browser window to understand why transparency was necessary for this setup.

$(window).load(function(){
var $window = $(window);
var $body = $('body');
var $contentWrapper = $('#content_wrapper');
var $content = $('#content');
var minHeaderHeight =160; // the height of the header plus margin

var lastWindowHeight = $window.height(); // save window height to calculate difference in height on resize

checkScroll(); // ensure correct scroll and heights on first load
stickyTop();   // implement sticky top if required on first load

$window.resize(function() {
    checkScroll();
    stickyTop();
});
$window.scroll(function() {
    stickyTop();
});

// rest of the Javascript code omitted for brevity...

</script>
// CSS styles here...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">

  // HTML structure here...
  
</div>

This transparent fixed header solution is now working smoothly. Feel free to run the full code in a new window and resize it to witness how the background adapts based on window width - that's why conventional masking wasn't suitable. It took me several days of trial and error to get it right, so hopefully, it can benefit others too!

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

Does d exclusively match digits from 0 to 9?

From my understanding, the \d in JavaScript should match non-english digits like ۱۲۳۴۵۶۷۸۹۰, but it appears to not be functioning correctly. You can check out this jsFiddle for more details: http://jsfiddle.net/xZpam/ Is this normal behavi ...

javascriptregexunicodeinternationalization

Inheriting static functions

In my Node.js project, I have created a few classes as Controllers for handling routes. I would like these classes to work on a singleton basis, although it's not mandatory. Main Controller class class RouteController { static getInstance() { ...

javascriptnode.jsclassstaticecmascript-6

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

Is there a way to separate elements with a comma explode function in PHP?

My situation involves working with a JavaScript array that I encode using JSON.stringify() and then append to the URL. Upon decoding it in PHP using $_GET, I am left with a string formatted like this: ["a","\nb","\nc","\nd"] Now, my task i ...

javascriptphparraysjson

The script is stuck displaying the existing records, failing to update with any new ones

Kindly refrain from offering jQuery advice. This script is created to display additional database records when you scroll down to the bottom inside a div named results-container. The issue I'm encountering is that the same data keeps appearing. I&ap ...

javascriptphpajax

Is there a way to implement coding similar to jQuery in the C programming language?

Can C language recreate jQuery functionality? Imagine we have a structure (similar to HTML): <div id="mymute"> <div> </div> <div> <img src="/agents/sleeping.png" /> </div> <div> </div> </div> ...

jqueryc++clinuxfedora

What could be the reason overflow:hidden isn't functioning properly in IE6?

Would you mind checking this out? http://jsfiddle.net/UQNJA/1/ It displays correctly in all updated browsers, including IE7/8 and 9. However, in IE6, the red and pink borders do not contain the floated <li>s. Any suggestions on how to fix this issu ...

htmlcssinternet-explorercross-browser

How can data be loaded into a datagrid using Jquery ajax?

Here's a snippet of code I'm working with (please ignore the incomplete ending script tag): <script type="text/javascript"> function gotoa(){ var h = $.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp", function(result) { }); ...

javascriptajaxjquerydatagrid

jquery: widget not disabling and initializing correctly

Check out this interesting jQuery widget code: (function($){ var _self, element, parentElement; $.widget('example.customWidget',{ options:{ optionA:'', optionB:'' }, des ...

jqueryjquery-uijquery-widgetsjquery-ui-widget-factory

Troubleshooting React child problems in TypeScript

I am facing a coding issue and have provided all the necessary code for reference. Despite trying numerous solutions, I am still unable to resolve it. export class JobBuilderOptimise extends React.Component<JobBuilderOptimiseProps & JobBuilderOptim ...

javascripthtmlreactjstypescriptchildren

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Bootstrap typically removes default paragraph margins and list styles for a cleaner look. However, there may be cases where you want to maintain the default styles for paragraphs and lists within a section of user-generated content on a Bootstrap 5-styled ...

csstwitter-bootstrapbootstrap-5

Modify the event from creating a table on click to loading it on the page onload

Hey there, friends! I've been brainstorming and came up with an idea, but now I'm stuck trying to switch the code to onload(). I've tried numerous approaches, but none seem to be working for me. Below is the code I've been working wit ...

javascriptjson

Unable to retrieve data from MySQL Database using Express Route

Struggling to understand how to execute a MySQL database query within the promise in my route file. Currently, I am developing a RESTful API for interacting with a MySQL database using GET methods. The technologies being utilized are Express for the backen ...

javascriptmysqlapiexpressaxios

Guide to customizing Highcharts for extracting targeted JSON information

I've been dedicating a significant amount of time trying to unravel this puzzle. Typically, I prefer researching solutions rather than posing questions, but this challenge has me completely perplexed. My goal is to generate a Highchart using data from ...

javascriptjqueryjsonhighcharts

The PayPal JavaScript SDK button triggers a blank window with a #blocked URL when used in a Django template, but does not have the same issue

I've been grappling with an issue while trying to incorporate PayPal buttons into my Django website. Every time I attempt to do so, the PayPal popup window shows up as about:blank#blocked. In the console, I can see the following error: popup_open_erro ...

javascriptdjangopaypal

Error Alert: Vue is not recognized in Browserify environment

My venture into front-end development has just begun and I am experimenting with Vue.js along with Browserify. The main 'app.js' file includes: window.$ = window.jQuery = require('jquery'); require('bootstrap'); var moment = ...

javascriptbrowserify

Is it possible to update JavaScript on mobile devices?

I'm currently working on a mobile site where I've implemented JavaScript to refresh a message counter. However, despite having JavaScript enabled on the device, the counter doesn't update on my Nokia e90. Interestingly, it works perfectly fi ...

javascriptmobile

Novel method for routing Single Page Applications without using hash or regular expressions

I have embarked on creating my own SPA (Single Page Application) stack tool. Currently, I am contemplating the router mechanism for it - deliberating between using a hash (#) based router or exploring alternative options: One option is to utilize the w ...

javascripturlroutesurl-routingsingle-page-application

What is the best way to fill in fields on my webpage using a dropdown menu choice?

I'm exploring the world of ASP.NET MVC, AJAX, and jQuery for the first time. I'm attempting to populate some text boxes on my website based on a dropdown selection but it seems like the data isn't getting through. I suspect that the 'ch ...

javascriptc#jqueryajaxasp.net-mvc

Numerous HTML Input Fields for SELECT Queries

Can form data be used in a SELECT query to search for results based on the input? Let's consider an example with three fields: Marketing Agreement Number: ______ Company ID: ________ Start Date: ________ What if you don't know the Marketi ...

phphtmlmysqlsql