Delete class at waypoints

Question

Delete class at waypoints

I am currently using waypoints.js to manage a single-page website that includes a highlighted navigation feature. When the viewport reaches the element with the class "content", the corresponding navigation point is given the class "active". The script is functioning correctly at this point. However, my goal is to remove the class "active" from the navigation point (specifically .content-nav-point) when the .content element is no longer in the viewport.

$('.content').waypoint(function() {
    $( '.content-nav-point' ).toggleClass('active');
}, { offset: '0%' });

javascript jquery html css jquery-waypoints

Answer 1

Answer №1

This solution should solve your problem. By including the direction parameter, you can control the scrolling direction to add or remove classes.

$('.content').waypoint(function(direction) {
    if (direction == 'down') {
      $( '.content-nav-point' ).addClass('active');
    }
    else {
      $( '.content-nav-point' ).removeClass('active');
    }
      $( '.content-nav-point' ).toggleClass('active');
  }, { 
    offset: '0%' 
  });

However, using the offset option might not be useful for checking if an element has exited the viewport. Consider adjusting your function to utilize the Inview shortcut for Waypoints instead of offset. More information can be found here:

Answer 2

This solution should solve your problem. By including the direction parameter, you can control the scrolling direction to add or remove classes.

$('.content').waypoint(function(direction) {
    if (direction == 'down') {
      $( '.content-nav-point' ).addClass('active');
    }
    else {
      $( '.content-nav-point' ).removeClass('active');
    }
      $( '.content-nav-point' ).toggleClass('active');
  }, { 
    offset: '0%' 
  });

However, using the offset option might not be useful for checking if an element has exited the viewport. Consider adjusting your function to utilize the Inview shortcut for Waypoints instead of offset. More information can be found here:

Delete class at waypoints

Answer №1

Similar questions

Having difficulty adding a custom library from a repository into an Ember project as a dependency

How can you apply a class to a different element by hovering over one element?

Creating HTML or PHP pages using jQuery

Expanding the width of Material UI Javascript Dialog Box

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

Modify visibility or enable state of a text box according to a checkbox in PHP

Compel the browser to initiate a reflow by adjusting the CSS

Create your masterpiece on a rotated canvas

"Utilize axios in React to interpret and handle error bodies captured through parsing as a ReadableStream

Expanding Perspective in React Native

Steps for updating a JSON entry in a Node.js environment

Aligning Content in the Center of a CSS Grid

Choosing two distinct options and transmitting information to PHP via AJAX

Are DIV elements really impossible to click using selenium Web Driver?

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

Combining Objects within an Array in JavaScript When Certain Conditions Are Satisfied

How can you disable an 'option' HTML5 element using the AngularJS methodology?

What is the reason for the lack of an applied CSS selector?

Setting the image path using setAttribute in JavaScript: A step-by-step guide

When clicked, activate a different overlay div