Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

I have a requirement for my website to have 2 navigation bars and also 2 sets of navigation links. I would like to implement scroll-spy functionality on both navigation bars, even though only one will be visible at a time. The issue I am facing is that when the second navigation bar appears and the first one disappears, the scroll-spy feature only works on the first nav. How can I ensure that the scroll-spy feature works on the second nav as well? Any assistance would be greatly appreciated.

<body data-bs-spy="scroll" data-bs-target="#spy">
  <nav id="spy"> <!----in the small screen size this nav is hidden------>
    <div class="nav-pills">
      <a href="#home" class="nav-links">Home</a>
      <a href="#" class="nav-links"></a>
      <a href="#" class="nav-links"></a>
    </div>
  </nav>
  <nav id="spy"> <!----in the small screen size this nav is visible------>
    <div class="nav-pills">
      <a href="#home" class="nav-links">Home</a>
      <a href="#" class="nav-links"></a>
      <a href="#" class="nav-links"></a>
    </div>
  </nav>
  <main data-bs-spy="scroll" data-bs-target="#spy" data-bs-offset="0" tabindex="0">
    <section id="home" class="section-part">
      ..................
    </section>
  </main>
</body>
htmlcssbootstrap-4bootstrap-5scrollspy

Answer №1

Here is a straightforward approach to tackle this issue:

window.onscroll = function(){mainNav()};
var navLinks = document.getElementsByClassName("nav-link");
var points = document.getElementsByClassName('section-part');
function mainNav() {
    if ((window.pageYOffset < points[1].offsetTop)) {
        navLinks[0].classList.add("newColor");
        navLinks[7].classList.add("newColor");
    }
    else {
        navLinks[0].classList.remove("newColor");
        navLinks[7].classList.remove("newColor");
    }
    // Rest of the conditional statements for adding or removing newColor class based on scroll position
}

=========================css part==========================

.newColor {
    color: blue !important;
}

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 autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

What is the process for extracting the time value from a jQuery timepicker?

I have been attempting to retrieve values from my time picker when a selection is made, but I am not seeing any values returned nor displayed in my HTML timepicker input field. Despite trying various methods, none have proven successful thus far. Method ...

javascriptjqueryhtmltimepicker

Updating an Image Using JavaScript

Having trouble changing an image using JavaScript. Followed instructions to use document.getElementbyId("image").src = "image2.jpg", but it's not working. Script is placed at the bottom after the image tag in the HTML. HTML code: ...

javascripthtml

Guide to inserting a line break for text in quotes within an HTML Div

I'm struggling with formatting a text in HTML, here's the situation: <div>"Book name is:Testbook"</div> What I want to achieve is to display "Testbook" on a new line like this: Book name is: Testbook Unfortunately, I' ...

html

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

javascriptcssreactjsmaterial-uistyled-components

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap

Consistently directing to a single page on the Node Js web server

I'm in the process of creating a website with multiple HTML pages. Currently, I have code that successfully links to the login page, but unfortunately, the localstores page also directs to the login page. const express = require('express') ...

javascripthtmlnode.jsexpress

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

I am attempting to showcase unlisted search results that can be clicked on to redirect the user to a specific HTML page based on data retrieved from a MySQL database. My development environment is PhoneGap. Thus far, I have successfully set up a basic PH ...

javascriptphpjqueryhtmlcordova

Creating a continuous loop in JQuery when clicking on a table row

I seem to be encountering an issue with what appears to be an infinite loop. My problem arises while trying to create a table dynamically using Ajax. Each row of the table contains a button alongside a thumbnail image and some text. I wish for the button ...

javascriptjqueryhtmlajax

Styling nested divs in CSS

I am experiencing an issue where the child divs within parent divs are overflowing outside of the parent divs. To get a better understanding of the problem, please try running the code below in a browser: My goal is to align the innermost divs horizontall ...

javascripthtmlcss

What sets apart 'hasClass' from 'is'? Additionally, is there a substitute to retrieve a Jquery element instead?

Similar Question: jQuery .hasClass() vs .is() Sample HTML code: <div class="results"> <div class="table"> <form class="tr" action="#" method="post"> <div class="td"> <input class="dat ...

javascriptjqueryhtmlfilter

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a si ...

htmlcsshtml-table

Ways to optimize view caching to prevent unnecessary file reads and rendering

My current code includes multiple view render calls: router.get('/mcn', (req, res) => { res.render('product/mcn', { layout: 'product/layout', contactKey: 'mcn' }); }); router.get('/agency', (req, res ...

htmlnode.jsexpresspugserver-rendering

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

htmlcssbootstrap-5

What is the best way to retrieve an image URL from a CSS file located in a public folder within a

Trying to set a background image in a css file located inside the public/ folder of Rails, but want the image to be sourced from the app/assets/images/ directory. Currently using the code below: background: url("bg-noise.png"); This method typically work ...

cssruby-on-rails

How to use JQuery to parse an external JSON file with array elements in Javascript

My goal is to extract information from an external JSON file using JavaScript, specifically an array and other elements. The JSON file I am working with is called 'TotalUsers.json' {"@version":"1.0", "@generatedDate":"12/20/10 5:24 PM", "day":[{ ...

javajavascriptjqueryhtmljson

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

javascriptasp.nethtml

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx