Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is to have it stick at the position between 100vh - 110vh.

A visual representation is included for better understanding. With a viewable area limited to 100vh, scrolling showcases subsequent sections from 100vh onwards.

Additionally, I seek to implement an "active" class on the navbar based on the current page section. For instance, when hovering over the About section, the corresponding link in the navbar should display the "active" class.

Hoping my explanation is clear enough. Apologies if it's confusing.

Appreciate your assistance in advance.

javascripthtmlcsssass

Answer №1

To have the navbar positioned at the bottom of the page, you can use CSS properties like position: absolute; and top: 100vh;. This will make the navbar stay in place and adjust its position as you scroll.

If you want the navbar to stick to the top once you reach a certain scroll point, change the positioning to position: fixed; and top: 0;.

It's important to understand the functionality behind the code snippets rather than just copying and pasting them.

window.addEventListener('scroll', function(){
  if(window.scrollY > window.innerHeight){
    document.getElementById('navbar').classList.add("sticky");
  } else {
    document.getElementById('navbar').classList.remove("sticky");
  }
});
* {
  margin: 0;
  padding: 0;
}
.pageOne {
  min-height: 100vh;
  background: pink;
}

#navbar {
  height: 100px;
  position: absolute;
  width: 100%;
  top: 100vh;
  left: 0;
  background: lightgreen;
  z-index: 2;
}

#navbar.sticky {
  position: fixed;
  top: 0;
}

.pageTwo {
  min-height: 100vh;
  background: orange;
}

.pageThree {
  min-height: 100vh;
  background: purple;
}
<div class="pageOne">Div One</div>
<div id="navbar">Navbar</div>
<div class="pageTwo">Div Two</div>
<div class="pageThree">Div Three</div>
<div class="pageTwo">Div Two</div>
<div class="pageThree">Div Three</div>

Answer №2

implement a scroll event on the page

adjust the navbar style to position :static when the page scrolls and the top is less than 100vh = window.innerHeight

then verify if the page has scrolled past 100vh

modify the navigation to have top :0 and position : fixed

include the animate class for displaying animation 

window.onscroll = () => {
  let c = window.scrollY;

  if (c > window.innerHeight) {
    document.getElementById("nav").className = "fixed-nav";
  } else {
    document.getElementById("nav").className = "";
  }
}
div {
  background-color: blue;
}

nav {
  background-color: red;
}

.fixed-nav {
  position: fixed;
  width: 100%;
  top: 0;
}
<div style="height:100vh"></div>
<nav id="nav" style="height:100px"></nav>
<div style="height:100vh"></div>
<div style="height:100vh"></div>

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

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

I am currently working on creating a data entry form using a table layout. The form has two columns - the first column for input titles and the second column mostly for input tags. I styled the inputs in the second column to appear transparent with no bord ...

javascriptjqueryhtmlforms

angular table disabled based on condition

I have a table in my HTML file and I am trying to figure out how to disable the onClick function if the start date is greater than the current date. <ng-container matColumnDef="d"> <th mat-header-cell ...

javascriptangular

Modifying Ajax-injected HTML with JQuery's editInPlace functionality

I have been successfully using the JQuery editInPlace plug-in on a static HTML page. However, I am facing an issue when trying to use the same plugin with HTML injected via an Ajax call. I have heard that using .on() like '$('.edit_inplace_fiel ...

jqueryhtmlajaxinject

Dealing with a checkbox click event in Vuejs when there is no parent element involvement

In the table below, you can see checkboxes displayed as images: example image of a table with checkboxes Here is an example code snippet: <tbody> <tr @click="goDetail"> <th scope="row><input type="checkbox" /></th> <t ...

javascriptvue.js

Limit the elements in an array within a specified range of dates

Currently, I am working on implementing a filter functionality for a data array used in a LineChart within my Angular application using TypeScript. The structure of the data array is as follows: var multi = [ { "name": "test1", "series": [ ...

javascriptangulartypescript

Tips for creating an Enumerable 'similarity' search using linq.js

I have a JSON array that looks like this: [ { "_Id": "0001", "_PatentId": "0000", "_Text": "Employee", "_Value": "employee", "_PermissionLevel": 55 }, { "_Id": "0002", "_PatentId": "0000", "_Text": "Employees" ...

javascriptjsonlinqlinq.js

Organizing content into individual Div containers with the help of AngularJS

As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...

javascriptjqueryhtmlangularjs

A curated collection saved in LocalStorage using React JS

I have implemented a LocalStorage feature to create a favorite list, but it only adds one item each time the page is reloaded. The items are retrieved from a JSON file. For a demonstration of how my code functions, check out this link: const [ storageIte ...

javascriptreactjsnext.jsreact-hookslocal-storage

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

javascripthtmlcontent-security-policynoncewebsecurity

The HTML checkbox remains unchanged even after the form is submitted

On a button click, I have a form that shows and hides when the close button is clicked. Inside the form, there is an HTML checkbox. When I check the checkbox, then close the form and reopen it by clicking the button again, the checkbox remains checked, whi ...

javascriptjqueryhtmlasp.netcheckbox

Firebug version 2.0.1 has been triggered to break on previous breakpoints

Despite adding and removing breakpoints, Firebug continues to stop at the old breakpoints upon refreshing the page. I attempted solutions such as resetting all Firebug options and deleting the breakpoints.json file, but they have not resolved the issue. ...

javascriptdebuggingfirefoxfirebugbreakpoints

perform the directive function following the ng-cloak execution

I am having an issue with my content using the ng-cloak directive, as I would like to retrieve the height of an element using innerHeight() within a directive. However, when I use innerHeight(), the element is hidden by ng-cloak so the result is always 0. ...

javascriptangularjsangularjs-directivengcloak

What is the best way to establish communication between methods in a React application?

In the SelectedTopicPage component, I currently have two methods: navigateNext and render. My goal is to pass the value of topicPageNo from the navigateNext method to the render method. What is the best way to achieve this in React? When I attempt to decla ...

javascriptreactjs

Troubleshooting issue with CSS in Django_tables2

Working with the django_tables2 plugin for the first time has been an interesting experience. I followed the installation and quick start guide provided in their documentation. After pip-installing django-tables2, adding 'django_tables2' to my ...

pythoncssdjango

Is there a way for me to retrieve the value nested within an object within another object from this Api response?

Hey there, I'm currently struggling to retrieve the value of faceit_elo from within the csgo object. I attempted using data.games.csgo.faceit_elo but unfortunately it didn't yield any results. Any suggestions on how to access this value would be ...

javascriptreactjsjsonreact-native

Restrict the PHP generated Json response to display only the top 5 results

I need to modify my search bar so that it only displays the top 5 related products after a search. public function getProducts() { if (request()->ajax()) { $search_term = request()->input('term', ''); $locatio ...

javascriptphparraysjsonlaravel

"Encountering issues with Rails and AJAX where the data returning is showing up

I am facing a challenge while trying to use AJAX in Rails to POST a comment without using remote: true. I am confused as to why my myJSON variable is showing up as undefined, while data is returning as expected. Check out my code below: function submitVi ...

javascriptruby-on-railsajax

How can Vue.js leverage dynamic templates within a component?

const CustomComponent = { props: ['index'], template: `<span>I am a custom component: {{ index }}</span>` }; const UserInputResult = { components: { CustomComponent }, props: ['templateString'], template: `& ...

javascriptvue.js

having difficulty retrieving the initial selected value of a dropdown using selenium

Situation 1: On the screen, there are two fields named district and territory. Some users have a default value already selected in these fields, with the drop down disabled. Below is the code snippet for reference. <select id="abcd" name="xyz" clas ...

javahtmlseleniumselenium-webdrivertestng

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css