navigation menu 'selective emphasis' feature

Question

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event listener:

$(document).scroll(function myFuction() {
    if ($(document).scrollTop() >= $("#contactMe").offset().top) {
        $("#contactButton").addClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").removeClass("active");       
    } else if ( $(document).scrollTop() > $("#portfolio").offset().top && $(document).scrollTop() < $("#contactMe").offset().top) {
        $("#contactButton").removeClass("active");
        $("#projectButton").addClass("active");
        $("#aboutButton").removeClass("active");
    } else if ( $(document).scrollTop() > $("#about").offset().top && $(document).scrollTop() < $("#portfolio").offset().top)  {
        $("#contactButton").removeClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").addClass("active");
    }
});

As the user scrolls, the function determines the position of the top of the page using scrollTop(), and then applies or removes the "active" class to highlight the appropriate text.

I am aware that performing actions within an event listener may not be the best approach, but I haven't found an alternative method yet. Perhaps I am trying to reinvent the wheel here?

I had hoped that the Bootstrap library would provide a predefined class for this functionality, but I have been unable to locate one so far.

javascript jquery css twitter-bootstrap

Answer 1

Answer №1

To optimize your code, consider assigning a class to all items, caching them as a jQuery collection, and then checking if they are within the viewport during scroll events in order to trigger specific actions.

Here's a quick demo:

var $items = $('.item')
var $window = $(window);
var $document = $(document);

function inViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.left < $window.width() &&
    rect.top < $window.height()
  );
};

$document.on('scroll', function(){
  $items.each(function(){
    if(inViewport(this)) {
      $items.removeClass('active');
      $(this).addClass('active');
      return false;
    }
  })
}).trigger('scroll');

.item {
  width: 100%;
  height: 150px;
  margin-bottom: 50px;
  background-color: #ddd;
}

.item.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"><span>#1</span></div>
<div class="item"><span>#2</span></div>
<div class="item"><span>#3</span></div>
<div class="item"><span>#4</span></div>
<div class="item"><span>#5</span></div>
<div class="item"><span>#6</span></div>
<div class="item"><span>#7</span></div>
<div class="item"><span>#8</span></div>
<div class="item"><span>#9</span></div>
<div class="item"><span>#10</span></div>

To enhance performance, it is recommended to throttle scroll calls either by using https://lodash.com/docs/4.17.4#throttle or your custom implementation.

Answer 2

To optimize your code, consider assigning a class to all items, caching them as a jQuery collection, and then checking if they are within the viewport during scroll events in order to trigger specific actions.

Here's a quick demo:

var $items = $('.item')
var $window = $(window);
var $document = $(document);

function inViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.left < $window.width() &&
    rect.top < $window.height()
  );
};

$document.on('scroll', function(){
  $items.each(function(){
    if(inViewport(this)) {
      $items.removeClass('active');
      $(this).addClass('active');
      return false;
    }
  })
}).trigger('scroll');

.item {
  width: 100%;
  height: 150px;
  margin-bottom: 50px;
  background-color: #ddd;
}

.item.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"><span>#1</span></div>
<div class="item"><span>#2</span></div>
<div class="item"><span>#3</span></div>
<div class="item"><span>#4</span></div>
<div class="item"><span>#5</span></div>
<div class="item"><span>#6</span></div>
<div class="item"><span>#7</span></div>
<div class="item"><span>#8</span></div>
<div class="item"><span>#9</span></div>
<div class="item"><span>#10</span></div>

To enhance performance, it is recommended to throttle scroll calls either by using https://lodash.com/docs/4.17.4#throttle or your custom implementation.

navigation menu 'selective emphasis' feature

Answer №1

Similar questions

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

AngularJS enables you to easily manipulate image width and height using the ng-file-upload feature

What is the best way to track and display the window.scrollY value in the console using Next.js

Content formatted with a gap

Exploring ways to retrieve boolean values with Angular and PHP

When you click on Highcharts, a bigger graph will be displayed

Error message: After using gulp-npm-dist to copy only the dependency modules, the node module was not

To extract three records from storage and store them in the dbResult using a promise join technique

Troubleshooting bitrate and quality issues in AWS MediaConvert

Angular code is malfunctioning and not delivering the expected results

Utilizing the array result obtained from the fetch function

Seeking help with the conversion of jQuery code to Angular

Stop RequireJS from Storing Required Scripts in Cache

Is it necessary to only override the monospaced font?

What is the best way to input an argument into my Javascript code using the command line?

Real estate listing featuring unique symbols

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

Guidance on creating a smooth fade-out effect for a div using jQuery when a text box is left blank

Could it be that express-session is not compatible with express 4.13?

Why is it possible for the EXPRESS+EJS template to access CONFIG without explicitly passing it when rendering?