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

The underscore module was not loaded by requirejs

Encountering an error - unclear on the exact issue. Occasionally the page/modules load fine, but often I am faced with this error message. This is happening with the most recent versions of underscore and backbone modules. Error: Module name 'under ...

Use CSS to insert a solid rectangle into the contents of a table cell

Struggling with the HTML code that defines a table? Here is an example: <table> <th> <td style="width:200px"> col1 </td> </th> <tr> <td id="a1"> text1 </td> </t ...

Strikethrough text with a distinct color similar to that seen in email messages

In my endeavor to customize the line-through text decoration in red and change the text color to black or any other color for an email, I have experimented with various methods. These include wrapping the text in a span and setting its color to red, using ...

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

What can you tell me about Page Event functionality in Datatables?

Curious question -- I'm currently seeking a practical example of how to implement a 'page' event in a project utilizing DataTables. The provided documentation can be found here -- http://datatables.net/docs/DataTables/1.9.4/#page. Despite t ...

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

Prolong the ultimate position of the initial animation for the translated object

I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations. Issue: The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seem ...

What is the best way to center a CSS arrow vertically within a table cell?

I'm having trouble with aligning a CSS arrow next to some text inside a table cell... <td><div class="arrow-up"></div> + 1492.46</td> My goal is to have the arrow positioned to the left of the text and centered vertically wit ...

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

Get the nearest H2 value in jQuery that is not a direct parent or child

In search of the h2 value closest to where the click occurred. The h2 resides within a sibling of the parent div. There are multiple div elements containing different h2 values. When a link is clicked, the nearest h2 value needs to be retrieved. <div c ...

Using jQuery to assign the value of a selected list item to an input field

I'm struggling with implementing a jQuery function to achieve the following: When a list item is clicked, it should add a 'select' class and remove any other selected list items The selected list item's data value should be set as ...

What is preventing these elements from being contained within particular divs?

I'm facing an issue with my HTML code and need some help unraveling what's happening. On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they a ...

Using `require` in place of `script` tags in a three.js file when working with Node.js environment

Instead of using the html script tag, I have implemented javascript require in my three.js file for node.js. Here is a snippet from an html file: <script src="../build/three.js"></script> <script src="js/controls/DragControls.js"></s ...

CSS-only method for creating a fixed position sidebar with adjustable width

https://i.stack.imgur.com/e4Gsv.png I have a vision of creating something similar to the image above solely using CSS. The design must incorporate the following elements: The image-container will hold a 3x4 aspect ratio image, filling the available heig ...

Invoke the jquery plugin upon completion of the HTML load via Ajax

For my current project, I needed to style input radio buttons and decided to use the jquery uniform plugin. However, the radio buttons are displayed after some Ajax content is loaded onto the page. Since I do not have permission to edit the form or Ajax ...

Bootstrap modal not displaying in full view

I recently ran into some issues while using a jQuery plugin with my bootstrap modal on my website. After implementing jQuery.noConflict(), I encountered a problem where the program no longer recognized $, forcing me to replace all instances of it with jQue ...

Replica of Spotify - Bottom Section - HTML and CSS Styling

I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'G ...

Tips for resolving a post 405 error on a Windows 2012 R2 server

My test application is designed to record camera footage and send the file to a directory on my server. The main code for this application is shown below: <!DOCTYPE html> <html> <head> <script src="https://cdn.WebRTC-E ...

When using CSS float:left and overflow:visible, the text may get cropped-off at

I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...