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

Tips for displaying a sub-menu upon hovering

Obtaining the source code from a different domain website with the help of jQuery

Preventing the occurrence of empty nested arrays within the state

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

Steps for configuring jQuery hide(), adding Class, and remove Class for flawless execution

Clear input field after successful submission using jQuery

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

The AngularJS $HTTP loop counter fails to update

What is the most effective approach for preventing the inadvertent override of other bound functions on window.onresize?

Direct users according to their browser language (excluding php)

Retrieve the id and value attributes of a checkbox using the success callback function in jQuery AJAX

Using two variables for iteration in Vue.js v-for loop

Is it possible to utilize the import feature to access and read a JSON file within a Next.js 13 API scenario?

Determine distinct items in an array that match a predefined criteria

Utilizing AngularJS within a Captive Network Assistant (WISPr) on iOS and MacOS devices

The height and alignment of the <a> tag and <p> element vary within a flex container

Adding images in ascending order according to the parent div's ID

Switching from real pixels to CSS pixels

What is the best way to conceal a canvas or another item?

Problem with MongoDB - increasing number of connections