Switch classes while navigating within a div

Question

Switch classes while navigating within a div

My website has a sticky sidebar with a list of cars and their corresponding categories in a table:

<ul class = "cars">
       <li class=""><a href="javascript:void(0)" class="model" data-id="1"> BMW </a></li>
    ......
        <li class=""><a href="javascript:void(0)" class="model" data-id="2"> Mercedes </a></li>
</ul>

The categories are represented as <div> elements like this:

<div class="element-title" id="car-category-1">BMW</div>
.....
     <div class="element-title" id="car-category-2">Mercedes</div>

My goal is to change the active class of the car in the list when scrolling through its corresponding category. Here's the jQuery code I'm using for this functionality:

$(document).on('click', '.model', function () {
    var this_id = $(this).data('id');
    var gotom = setInterval(function () {
        cars_go_to_navtab(this_id);
        clearInterval(gotom);
    }, 400);

    $('.cars li').removeClass('active');
    $(this).parent().addClass('active');
});
function cars_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);
    $('html, body').animate({
        scrollTop: scrolling_div.offset().top - 70
    }, 500);
}

javascript jquery html css

Answer 1

Answer №1

Check out this informative article on CSS-Tricks for a pure CSS solution (although it may not be exactly what you need), which also references another excellent article that utilizes the Intersection Observer. To implement this in your code, consider adding something similar to the following:

const observer = new IntersectionObserver(entries =>
{
  for (const entry of entries) {
    if (entry.isIntersecting) {
      // add css style here
    }
    else {
      // remove css style here
  }
});
observer.observe(document.querySelector('#your-element-selector'));

Additionally, make sure to test compatibility across various browsers using a support table like canIuse.

Answer 2

Check out this informative article on CSS-Tricks for a pure CSS solution (although it may not be exactly what you need), which also references another excellent article that utilizes the Intersection Observer. To implement this in your code, consider adding something similar to the following:

const observer = new IntersectionObserver(entries =>
{
  for (const entry of entries) {
    if (entry.isIntersecting) {
      // add css style here
    }
    else {
      // remove css style here
  }
});
observer.observe(document.querySelector('#your-element-selector'));

Additionally, make sure to test compatibility across various browsers using a support table like canIuse.

Answer 3

Answer №2

A straightforward approach using JQuery. Additionally, investigate the potential of the Intersection Observer API

$(document).on("scroll", function() {
  var scrollPos = $(document).scrollTop();
  $('#menu a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('#menu ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  font-family: helvetica, sans-serif;
}

.content {
  flex: 1;
  padding-left: 200px;
}

.section {
  background-color: grey;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

#menu {
  position: fixed;
  top: 0;
  background: #444;
  width: 200px;
}

#menu a {
  padding: 10px;
  display: flex;
  color: #FFF;
  text-decoration: none;
}

h1 {
  font-size: 30px;
  color: #FFF;
}

.active {
  background: #4CAF50;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div id="menu">
    <ul>
      <li><a class="active" href="#bmw">BMW</a>
      </li>
      <li><a href="#mercedes">Mercedes</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="section" id="bmw">
      <h1>
        BMW
      </h1>
    </div>
    <div class="section" id="mercedes">
      <h1>
        Mercedes
      </h1>
    </div>
  </div>
</div>

Answer 4

A straightforward approach using JQuery. Additionally, investigate the potential of the Intersection Observer API

$(document).on("scroll", function() {
  var scrollPos = $(document).scrollTop();
  $('#menu a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('#menu ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  font-family: helvetica, sans-serif;
}

.content {
  flex: 1;
  padding-left: 200px;
}

.section {
  background-color: grey;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

#menu {
  position: fixed;
  top: 0;
  background: #444;
  width: 200px;
}

#menu a {
  padding: 10px;
  display: flex;
  color: #FFF;
  text-decoration: none;
}

h1 {
  font-size: 30px;
  color: #FFF;
}

.active {
  background: #4CAF50;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div id="menu">
    <ul>
      <li><a class="active" href="#bmw">BMW</a>
      </li>
      <li><a href="#mercedes">Mercedes</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="section" id="bmw">
      <h1>
        BMW
      </h1>
    </div>
    <div class="section" id="mercedes">
      <h1>
        Mercedes
      </h1>
    </div>
  </div>
</div>

Switch classes while navigating within a div

Answer №1

Answer №2

Similar questions

Sync issues observed with jQuery slide animations

The JQuery $post() function appears to be unresponsive

It appears as though the promise will never come to fruition

What is the best way to prevent useEffect from triggering when a modal is being rendered?

Looking to add a close button to the iFrame, but having trouble getting it to function when clicked

Connections between Wordpress websites and CSS styling

Combine an array of objects into a regular object

Instructions on opening a modal and changing the source of the iframe within the modal

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

Combining two arrays filled with objects to form a collection of Objects on a Map

Having trouble getting npm install to add any libraries? Wondering how to fix this issue?

The art of combining CSS3 gradients with background images

"Utilizing Angular's $http.post to extract data from resolved promises

Configuring Firefox settings in Nightwatch

The Axios.catch method does not handle network or console errors

Utilize Bootstrap to combine two tables within a single column efficiently

Troubleshooting: Why isn't my CSS fixed position working for my sticky

Bootstrap component malfunctioning and not performing as expected

Using Vue's V-IF directive to compare dates

Using expect() within the .then() function when writing Jasmine unit tests for AngularJS