Navigation panel featuring points of interest

Greetings, my name is Kasper!

I am currently working on incorporating waypoints into the sidebar of my portfolio website, a feature I just recently discovered.

However, I seem to be struggling with getting it right. Here is a snippet of my code:

   <!-- /#sidebar-wrapper ----------------------------------------------------------------------->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <div class="menu-links scroll-me">
                    <li class="sidebar-brand">
                        <div href="#">
                            <a href="#header">
                                <img class="ImageFixsTyle" src="assets/img/logsmall.png" alt="SbnLogo" /></a>
                        </div>
                    </li>
                    <hr />
                    <li><a href="#about"><i class="fa fa-archive fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#clients"><i class="fa fa-globe fa-spin fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#NewsLetter"><i class="fa fa-user-plus fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#contact"><i class="fa fa-mars-stroke fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#contactme"><i class="fa fa-envelope fa-2x"></i></a></li>
                    <hr />
                </div>
            </ul>
        </div>
        <!-- /#sidebar-wrapper ----------------------------------------------------------------------->

You can see this code in action at:

My goal is to highlight the current menu point whenever I navigate to it, but I have been unable to find a solution that fits my specific issue.

I would greatly appreciate any assistance as this problem is causing me quite a bit of stress! Thank you for taking the time to read this.

Have a wonderful day/evening!

htmlcssjquery-waypoints

Answer №1

For a solution, you can refer to this link. The idea is to treat each block as a waypoint and when it is reached, highlight the corresponding link in the menu based on the href attribute.

$(function() {
   $('p').waypoint({
       handler: function(direction) {
  $("a").css("color", "");
    $("a[href='#" + this.element.id + "']").css("color", "red");
  }
})
});
ul {
  position:fixed;
  top:0;
  left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
<ul>
<li>
  <a href="#item1">item1</a>
</li>
<li>
  <a href="#item2">item2</a>
</li>
<li>
  <a href="#item3">item3</a>
</li>
</ul>
<div>
  <p id="item1">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>
  <p id="item2">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>
  <p id="item3">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p>
</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

Retrieve information from an HTML table on a website and transfer it to a spreadsheet in Excel

I'm looking for assistance with extracting data from a website using VBA. I have an Excel table with ETF tickers, links, and prices, and I'm attempting to retrieve the previous day's closing price from each link using VBA. The challenge I&ap ...

htmlexcelvbaselenium-webdriverinternet-explorer

Code Not Functioning on Website Despite Working in Console

I've developed a jQuery script that eliminates any delivery methods containing the phrase "Royal Mail" if certain products are present in the user's cart. The script functions flawlessly when executed in Google Chrome Console but fails to work wh ...

javascriptjqueryhtml

detect mouse click coordinates within an iframe that spans multiple domains

I am currently encountering an issue with tracking click position over a cross-domain iframe. Here is my current code: <div class="poin"> <iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video">< ...

javascriptjqueryhtmliframecross-domain

Is it normal for the player to occasionally pass through platforms in the early stages of the infinite runner game

Currently working on developing an infinite runner game in javascript using the html5 canvas. Progress has been good so far, but encountering a problem with the jump mechanism - occasionally, the player will pass through the platform they are supposed to l ...

javascripthtmlhtml5-canvasgame-physics

Steps to correct color gradient on a fixed top navigation bar:

In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible wh ...

cssbootstrap-4navbartransparentlinear-gradients

Can Django implement pagination without altering the URL structure?

I discovered the fundamentals of pagination in Django at this resource: Nevertheless, I am faced with a challenge - I wish to implement pagination without modifying the URL. Specifically, I need to paginate a single table among multiple tables on an HTML ...

pythonhtmldjangohtml-tablepagination

Is it possible to assign cookie values after the html content on a webpage has finished loading?

I've come across information suggesting that cookie values can be set after the HTML content has been sent from a PHP script to the web server. Despite trying to implement this, I seem to be facing difficulties in setting up the cookies as desired. C ...

phphtmlcookies

Animating elements in Nativescript Vue using v-show and transitions

I am facing some issues while using v-show with Nativescript. I attempted to create an animation as outlined in . When using v-show, the element doesn't completely disappear from the screen. Below is my code: <template> <Page actionBarHi ...

cssvue.jsnativescriptnativescript-vue

Uninterrupted text streaming with dynamic content that seamlessly transitions without any gaps

I'm currently facing a challenge with an outdated element like <marquee>. Here's a fiddle where you can check it out: https://jsfiddle.net/qbqz0kay/1/ This is just one of the many attempts I've made, and I'm struggling with two m ...

javascriptjqueryhtmlcss

Can the tooltip of an element be changed while the old tooltip is still visible without having to move the mouse away and then back again?

When I have an HTML anchor element with a tooltip that appears when the mouse is hovered over it, and then I use JavaScript to change the tooltip's text using element.title = "Another Tooltip", the new tooltip text does not immediately update visually ...

javascripthtml

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...

htmlcss

React cannot be utilized directly within HTML code

I am looking to incorporate React directly into my HTML without the need for setting up a dedicated React environment. While I can see the test suite in the browser, my React app fails to load. Below is the content of my script.js file: I have commented ...

javascripthtmlreactjs

Manipulate input fields dynamically with JavaScript

I am currently working on a functionality that involves generating an alert button based on a selection from a drop-down menu. The JavaScript part of the code is able to successfully read and send the values from the <select> drop-down as intended. H ...

javascripthtmldom

IE11 not running Angular code inline as expected

Currently in the process of developing an AngularJS application, I came across a strange issue that I have never encountered before. It may be a simple fix, but I am unsure of the exact terminology to search for the right solution, so I apologize in advanc ...

htmlcssangularjsinternet-explorer

Discovering the true hard link URLs

Currently, I am conducting research on a specific topic. I have noticed that some websites are developed using JavaScript, such as . One interesting aspect I have observed is that when clicking on the paging, the URL remains the same while the page conte ...

javascripthtml

Creating a choppy movement when switching between content with jQuery

I am experiencing a choppy effect when trying to toggle the content visibility with a button click. Can someone advise if there are any issues in how I have structured the markup? Also, is there a way to achieve a smoother toggle effect? View Code $(do ...

jqueryhtmlbootstrap-4

By setting up a keydown event listener, I am unable to inspect HTML elements by using the F-12 key shortcut in Chrome

Recently, I encountered an issue where adding a keydown event listener in my JavaScript code prevented F-12 from working properly. window.addEventListener("keydown", function (event) { if (event.defaultPrevented){ retu ...

javascripthtmlgoogle-chromekeyboardaddeventlistener

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

htmlcsshyperlinkalignment

Showcasing just the initial two lines of a flexbox using CSS and HTML

My current project requires me to develop a search bar that displays search results in a grid format. The items should be arranged next to each other in two rows. If there are additional results, a button labeled +32 should be present to show all results. ...

javascripthtmlcss

What is the best way to achieve a 3D tile layout with a zoom effect when hovering over them in a row

Trying to arrange 3D tiles in a row with zoom effect on hover and responsiveness is the ultimate goal. The desired look and feel can be seen below, https://i.sstatic.net/yZVrm.jpg Currently utilizing Bootstrap 3 and WordPress. Seeking guidance on how to ...

jqueryhtmlcsswordpresstwitter-bootstrap-3