How can I change the background color of left sticky sidebars li on scrolling?
When scrolling through BMW, BMW's background color in the sidebar should turn green.
Please refer to the code snippet provided below.
The background color of the li elements should change similar to the click event but when scrolling.
Any assistance would be highly appreciated. Thank you.
var $ = jQuery;
$(document).on('click', '.car-category-link', function () {
var this_id = $(this).data('id');
var gotom = setInterval(function () {
restaurant_go_to_navtab(this_id);
clearInterval(gotom);
}, 400);
$('.car-list li').removeClass('active');
$(this).parent().addClass('active');
});
function restaurant_go_to_navtab(id) {
var scrolling_div = $('#car-category-' + id);
$('html, body').animate({
scrollTop: scrolling_div.offset().top
}, 500);
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.car-list .active {
background-color: #4CAF50;
color: white;
}
.table {
margin-left:25%;padding:1px 16px;height:1000px;
}
input {width:400px}
</style>
</head>
<body>
<ul class="car-list">
<li class="active"><a href="javascript:void(0)" class="car-category-link" data-id="0"> Honda </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="1''>> BMW </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="2"> Mercedes</a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="3"> Volvo </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="4"> Main Course </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="5"> Jeep </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="6"> Buggati </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="7"> Ferrari </a></li>
<li class=""><a href="javascript:void(0)" class="car-category-link" data-id="8"> Audi </a></li>
</ul>
<div class="table">
<div class="sticky-search" style="position: fixed; top: 50px;">
<input placeholder="when the title is close to me then change li's background">
</div>
<div class="element-title" id="car-category-0">
<h2 class="text-color">Honda</h2>
<span></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It...