Is there a way to display a secondary header once the page is scrolled down 60 pixels?

.nav-header2{
         background: purple;
         display: flex;
         justify-content: center;
         align-items: center;
}
.header2-container{
        width: 68vw;
         height: 60px;
         padding: 0 2vh;
         border: 1px solid red;
         border-radius: 0.5rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
}
.nav-header1{
         background: lightblue;
         display: flex;
         justify-content: center;
         align-items: center;
}
.header1-container{
        width: 68vw;
         height: 60px;
         padding: 0 2vh;
         border: 1px solid blue;
         border-radius: 0.5rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
}
  <!--header2 -->
  <nav class="nav-header2">
      <div class="header2-container">
          <h1>header2<h2>
      </div>
  </nav>
  
  <!-- header1 -->
  <nav class="nav-header1">
      <div class="header1-container">
          <h1>header1<h2>
      </div>
  </nav>

I have two different headers set up for my website which are named as header1 and header2.

The task I want to achieve is displaying header2 when the user scrolls down more than 60 pixels, and hiding it when scrolling back up within less than 60 pixels.

If the condition is met (scrolling down more than 60px), then display header2, otherwise keep displaying header1.

I've made numerous attempts to accomplish this but haven't been successful. Please lend me your assistance. Thank you very much!

javascripthtmlcss

Answer №1

If you scroll down 60 pixels or more, the first header will disappear and the second header will appear.

window.addEventListener("scroll", () => {
  if (scrollY >= 60) {
    document.querySelector(".headerOne").style.display = "none";
    document.querySelector(".headerTwo").style.display = "block";
  } else {
    document.querySelector(".headerTwo").style.display = "none";
    document.querySelector(".headerOne").style.display = "block";
  }
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  background-color: gray;
}

.headerOne,
.headerTwo {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  font-size: 20px;
  text-align: center;
  height: 60px;
}

.headerTwo {
  display: none;
}
<div class="headerOne">header 1</div>
<div class="headerTwo">header 2</div>
<section>section</section>
<section>section</section>

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

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

I'm working on an application that heavily relies on AJAX requests, requiring the rapid or concurrent sending of multiple calls. The code snippet provided serves as a basic wrapper for sending AJAX POST requests within the app. However, I've enco ...

javascriptajaxasynchronousxmlhttprequest

Turn off the autofill option for passwords in Google Chrome

Is there a way to prevent the password autocomplete dropdown from appearing when clicking on the password field? In Chrome Version 61.0.3163.100, none of the solutions seem to be working. Screenshot This issue has been raised many times, but setting autoc ...

javascriptjqueryhtmlgoogle-chromeautocomplete

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

Suppose I have an array structured like this. It contains objects with different values but the same date. [ { "date": "2020-12-31T18:30:00.000Z", "value": 450 }, { "date": "20 ...

javascriptarraystypescriptarraylistgrouping

What steps do I need to take to deploy my React app onto a server?

I recently completed creating my first website with React and now I want to upload it to my server (HostGator). Can anyone guide me on how to do that? Thank you. ...

javascriptreactjsnpm

What is the best way to position the content area to the right of the menu on my website?

Hey there! I'm currently facing an issue with Bootstrap 4 where my content area is appearing below the vertical navbar instead of next to it on the right side. Any suggestions on how to adjust my code to fix this? Thanks in advance! <div class=&qu ...

htmlbootstrap-4

Issue encountered while using AJAX to load images

Currently, I am utilizing a jQuery plugin to fetch images from Flickr. My aim is to organize these images into 3 columns dynamically as they are loaded, ensuring that each image is placed in the shortest column to achieve close to equal lengths for all col ...

javascriptimagejquery

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

javascripthtmlxcodecordova

Steps for transforming an array of file names into JSON format and including a specific key

I am in the process of creating a new website that will display all the files contained in a specific folder. However, I am facing an issue with converting an array of document names into JSON format. In order to achieve this, I understand that I need to ...

javascriptnode.jsjsonexpressfs

Changing the value of a variable after iterating through an array in JavaScript

I'm just getting started with programming and teaching myself. I'm struggling to grasp how to update a variable by iterating through an array. Here's an array containing the best pies, each with its own price: [blueberry, strawberry, pumpk ...

javascriptarraysif-statementiteration

Creating a resilient node websocket client with enhanced security (overcoming the challenge of verifying the initial certificate)

What's Working? I successfully created a node server using WebSocket technology. I used the library WebSocket-Node and added key/cert to my HTTPS/secure websocket server as shown below: import WebSockerServer from "websocket"; import fs fro ...

javascriptnode.js

ReactJS safeguarded route redirection/refresh obstacle

Utilizing react and react-router-dom: import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; To secure a route with the following: Router const Router = () => { return ( <Switch> ...

javascriptreactjs

What is the correct way to set up Cypress intercepts within a beforeEach function?

As a newcomer to Cypress, I find some aspects of it challenging despite its apparent simplicity. I am facing a specific issue: const componentsRouteMatcher = { pathname: '/component-management/api/components', query: { size: &apos ...

javascriptintegration-testingcypress

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

javascriptasp.netcssvb.netwebforms

Troubleshooting: Images not appearing on HTML pages

I've recently started learning HTML and can't figure out why my code isn't working. I am trying to add an image but it only appears as a blue box with a question mark in it. Here is my code: <head> <title>Welcome</title> ...

htmlimage

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

javascripthtmlcssangulartypescript

Submitting hidden values and multiple values with checkboxes in HTML

Is there a way to link multiple form fields with one checkbox for submission? For example: <input type=hidden name=code value="cycle_code" /> <input type=checkbox name=vehicle value="cycle" /> <input type=hidden name=code value="car_code" ...

javahtmljspcheckbox

What is the best way to trigger UseEffect when new data is received in a material table?

I was facing an issue with calling a function in the material table (https://github.com/mbrn/material-table) when new data is received. I attempted to solve it using the following code. useEffect(() => { console.log(ref.current.state.data); ...

javascriptjqueryreactjsmaterial-uimaterial-table

What steps do I need to take in order to successfully make a checkbox?

I am attempting to use Angularjs to set a checkbox to true. When saved, it should store an integer value (1 or 0) in my field. Below is the code snippet for the view: <input type="checkbox" ng-model="lis.SMSPromotion" id="SMSPromotion" ng-init="checke ...

htmlangularjs

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

javascripthtmlcssreactjs