How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Is there a way to make the navigation bar appear only when a user has scrolled down to the second div on the page? The first div is the header.

I am wondering how this can be achieved using jQuery?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <nav>navigation menu</nav>
    header 200px height
  </header>
  <div id="div-2">Second Div</div>
</body>
</html>

CSS

header{
  height:200px;
}
nav{
  background-color: red;
  width: 100%;
  height: 30px;
  display: none;
}
#div-2{
  background-color: blue;
}

JSBIN

Answer №1

Give this a shot.

What I did was include

position: relative;
z-index: 11;

to the initial div so that it appears above the navigation bar.

* {
  margin: 0;
  font-family: Arial;
}
.slide {
  height: 1000px;
  font-size: 20px;
}
#slide1 {
  background: #999;
  position: relative;
  z-index: 11;
}
#slide2 {
  background: #888;
}
#slide3 {
  background: #777;
}
#slide4 {
  background: #666;
}
.nav {
  position: fixed;
  font-size: 20px;
  color: #000;
  background: #ccc;
  left: 0;
  right: 0;
  top: 0;
}
.nav a {
  color: #fff;
  display: inline-block;
  padding: 5px;
  text-decoration: none;
}
<div class="nav" style="">
  <a href="#slide1" class="scrollThis">slide1</a>
  <a href="#slide2" class="scrollThis">slide2</a>
  <a href="#slide3" class="scrollThis">slide3</a>
  <a href="#slide4" class="scrollThis">slide4</a>
</div>
<div class="wrapper">
  <div id="slide1" class="slide">slide1</div>
  <div id="slide2" class="slide">slide2</div>
  <div id="slide3" class="slide">slide1</div>
  <div id="slide4" class="slide">slide2</div>
</div>

Answer №2

If you want to detect when a div appears on the screen, you can utilize the Viewport plugin.

Check out this demo to see how it works:

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

All images must be arranged to fit seamlessly side by side regardless of the screen size

I'm currently experimenting with creating a website dedicated to my favorite TV shows. Upon entering the site, you are greeted with the main page that includes 7 images. Each image is linked to a specific webpage providing information about the corre ...

Troubleshooting: Difficulty with jQuery's resize event handler not functioning properly with

I'm currently facing an issue where I want a divider to adjust its size when another divider changes size due to new content being loaded into it. However, even after binding the resize event handler to the divider that loads the content, the event do ...

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

Create a function that adds a new div element with a one-of-a-kind identification when

I am currently developing a web application on www.firstusadata.com/cash_flow_test/. The functionality involves two buttons that add products and vendors dynamically. However, the issue I'm facing is that the appended divs do not have unique IDs, maki ...

Retrieving JSON data using a jQuery AJAX call

I'm struggling with parsing JSON data from a PHP file to jQuery. I've been searching for the right method, but it's been challenging. Any assistance would be greatly appreciated. It must be done within a function. Currently, I have reached ...

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

Integrate a Facebook Like-box within a customized jQuery modal window

I've been working on inserting the Facebook like-box code into my page and trying to display it within a jQuery modal dialog. Here's the code I'm using: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>< ...

Managing properties of classes within callbacks using TypeScript

I am currently working on the following task: class User { name: string; userService: UserService; //service responsible for fetching data from server successCallback(response: any) { this.name = string; } setUser() { ...

Using jQuery to Retrieve the HTTP Status Code in the $.ajax.error Function

Currently, I am utilizing jQuery for an AJAX request. Depending on whether the HTTP status code indicates a 400 error or a 500 error, I wish to execute different actions. How can I go about achieving this? $.ajax({ type: 'POST', url: &ap ...

Develop a personalized mapping API with a unique image integration for website navigation

Currently, I am in the process of developing a website for my university that will allow users to easily locate all available free food options on campus. My goal is to create a platform where food providers can register their events, have them saved in a ...

What is the best way to handle JSONp response parsing using JavaScript?

I'm relatively new to working with Javascript and I am currently attempting to retrieve data from an External API located on a different website. My goal is to extract the information, parse it, and then display specific parts of it within my HTML pag ...

Pressing JavaScript buttons to trigger another button

I am looking to develop a script that generates a button which then creates another button. The subsequent button will be assigned an id attribute by incrementing from 1 to infinity. This feature should apply to all buttons (original button and the newly ...

header color scheme and dimensions

Hello, I've managed to get the menu working correctly on my website at www.g-evo.com/header.php. However, I'm now facing an issue with the size of the header. I'd like to shrink the grey area slightly so it aligns better with the logo, while ...

Adding a data attribute to a Material-UI Button: A step-by-step guide

I'm trying to include a custom data attribute in the Material-UI Button Component as shown here. Here's what I attempted: <Button inputProps={{ 'data-testid'='clickButton' }} > Click </Button However, this approach ...

Is there anyone who can provide a comprehensive explanation for what is going on here?

{ // Let's figure out how to launch my HTML file as a webpage in Chrome. "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", &q ...

Print Vue page with the same styling as the original

How can I add a print button to my application that prints the page with the original CSS styles? I am currently using window.print() function and have a separate file called print.scss with specific print styles. @media print { header {display:none; ...

Utilizing Ajax, JavaScript, and Webmatrix to dynamically refresh a select box

I'm a beginner when it comes to working with Ajax. The goal I am aiming for seems like a common one. I have two dropdown boxes, "area" and "resort", that are connected to my database. The concept is simple: when a user selects an area from the first ...

Database storage of image tags on websites, similar to functionality found on social media platforms such as Facebook

Looking for an image tagging solution for websites that can save tag data directly to a database instead of a local file? I've checked out , but it doesn't support database integration in the current version. Ideally, I need a solution that is co ...

How can we use a :before tag element to create a hovering effect on an image that remains clickable?

My objective is to create an image that is wrapped in a link. The link will have a pseudo element :before that adds a black overlay on hover. I want the image to remain clickable, but no matter what I try, the pseudo element won't position correctly o ...

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...