Looking to keep the header section of my webpage sticky at the top while allowing the content section to scroll over it? I need a solution using JavaScript or jQuery that will achieve this effect.
Here is the HTML structure:
<div id="header">
<h3>I want this header to stay fixed at the top! </h3>
</div>
<div id="content">
<h3>I want this content to scroll over the header when the user scrolls.</h3>
</div>
Correction: I see now, you actually want the content to scroll over the header, not under. In that case, your CSS should look like this:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
You can view an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header has a fixed height, let's say 100px, then you should use this CSS:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This setup ensures that when you scroll to the top, the header does not cover the content. However, as you start to scroll down, the header will overlay the content.
Here is a suggestion based on your inquiry:
<div id="wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I want to remain in the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I want to overlap the header when the user scrolls.</h3>
</div>
</div>
I have successfully implemented https://github.com/bigspotteddog/ScrollToFixed in my projects without any issues. This library allows you to specify when a div element should become fixed based on the scroll position.
Check out this example on jsfiddle: jsfiddle.net/ZczEt/167/
Make sure to include the following CSS:
*{margin:0;padding:0}
#navbar{
position:fixed;
width:100%;
height:150px;
background-color:#333;
}
h2{
text-align:center;
}
#main-content{
background-color:#f1f1f1;
padding-top:150px;
min-height:400px;
}
After some experimentation, I found an alternative solution that worked for me:
Instead of directly manipulating the header, I decided to create an additional container div within the header. I then fixed the position of this new div and set its contents to be absolute. However, keep in mind that in this approach, you will need to specify a min-height or height for the header:
<div id="header">
<div class="wrapper">
<h3>I want to remain in the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I want to overlap the header as the user scrolls.</h3>
</div>
CSS:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.wrapper{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
My goal is to create a visual representation of an area range graph with a corresponding mid line. You can view the image below for reference: https://i.sstatic.net/8KDbF.png While I have successfully incorporated the low and high values, I am encounterin ...
Is it possible to create a popup box that includes a form with four input fields and a checkbox where if the checkbox is checked, typing in one field automatically populates the same information in the other fields using jquery ajax? Are there any demons ...
I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...
Can I combine JavaScript selector document.querySelector with jQuery functions instead of using $ or jQuery selectors? For instance: $.getJSON("list.json", function(data) { document.querySelector("#content").html(data.name); }); When trying to use d ...
I am facing an issue where I want to make text flash between yellow and grey colors, but I want the yellow color to display for a longer duration than the grey color. Currently, the code I have only works for an equal duration for each color. function fl ...
I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...
$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...
After several attempts to troubleshoot my issue with passing parameters to the Express server, it turns out the problem lies on the Angular side. When I manually inserted the id in the flConstruct.js function, the query worked correctly. It appears that ...
Can I achieve this? My goal is to develop a universal factory function that can generate different types of factories with some commonalities. I aim to pass arguments as an array to the base factory, which would then potentially create a new object instanc ...
Imagine a scenario where I have a paragraph with various span elements that are styled using classes. What if there are numbers interspersed within the text for easy reference, and I want to ensure they do not end up at the end of a line? For example: 1 ...
Currently, I am working with Express.js to create a straightforward login post request. Here is the code snippet: app.post("/login", (req, res) => { res.send( { isUserRegistered: userLogin(req.body.strEmail, req.body.strPassword), ...
Currently, I am in the process of constructing a JSON object and sending it to the server using JQuery ajax. data: "{'authorID' : '" + authorID + "', 'title' : '" + encodeURIComponent(blogTitle) + "', &a ...
Utilizing AngularJS to retrieve a JSON file: { "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt", "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/92c952" }, and showcasing it with ...
Looking for some assistance with a HTML/CSS issue... I've created a new menu using the following CSS and code, but I'm encountering a problem with extra space between lines of text within the menu (specifically with the 'big' and &apos ...
Internet Explorer stores data in cache and even if there are changes, it may not reflect onclick. However, when I open the developer mode and try to access the same, then it works perfectly. This issue only seems to occur in IE as all other browsers work f ...
I received a JS string through an AJAX API call containing data like this: {"Task":"Hours per Day","Slep":22,"Work":25,"Watch TV":15,"Commute":4,"Eat":7,"Bathroom":17} My goal ...
Unique Json data: [{ cityName: Seattle, population: 1000000, rank: 1 }, { cityName: Portland, population: 800000, rank: 2 }, { cityName: San Francisco, population: 900000, rank: 3 }, { cityName: Los Ange ...
I've created a menu that is stacked on top, with the "Representaciones" section shown on the same page below a welcome image. However, when I click on it, everything works fine but if I refresh the page, the "selected" class disappears from "represent ...
In my local storage, I have some data stored in a unique format. When I try to retrieve the data using localStorage.getItem('id');, it returns undefined. The issue lies in the way the data is stored within localStorage - it's structured as a ...
Currently, I have a function called getBackground(items) that returns a background color from a JSON file list. Within my application, there is a component that automatically adds a class name (.item-radio-checked) when a user clicks on an item in the list ...