更改侧边栏<li>滚动颜色

Question

How to make left sticky sidebars li's background color to change on scrolling?如何使左粘性侧边栏 li 的背景颜色在滚动时改变？
If I scroll through BMW then BMW's background color on the sidebar should be green.如果我滚动浏览 BMW，则侧边栏上的 BMW 背景颜色应该是绿色。
Please see the code snippet below.请参阅下面的代码片段。
So li's should have the same background as on click event but when we scroll.所以 li's 应该具有与点击事件相同的背景，但是当我们滚动时。
Any help would be appreciated.任何帮助，将不胜感激。 Thank you in advance.先感谢您。

 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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-1"> <h2 class="text-color">BMW</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-2"> <h2 class="text-color">Mercedes</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-3"> <h2 class="text-color">Volvo</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-4"> <h2 class="text-color">Jeep</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-5"> <h2 class="text-color">Buggati</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-6"> <h2 class="text-color">Ferrari</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="element-title" id="car-category-7"> <h2 class="text-color">Audi</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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.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 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </body> </html>

Answer 1

So, I came up with a solution.所以，我想出了一个解决方案。 First off all, you have to correct your categories.首先，您必须更正您的类别。 There was a mismatch.存在不匹配。 You pressed "Volvo" and it went to "Mercedes".你按下了“沃尔沃”，它就转到了“梅赛德斯”。

So what I did is, create an event listener when the user finished their scrolling.所以我所做的是，在用户完成滚动时创建一个事件侦听器。 Then check which headline is still visible in our view.然后检查哪个标题在我们的视图中仍然可见。 We start with the first headline and check each one.我们从第一个标题开始并检查每个标题。 The one that is getting found first, will be our new element which is going to be active.最先找到的将是我们将要激活的新元素。 (I am only searching for headlines, not the main text. Sometimes the main text can still be visible, however the active li will be the next headline. You can change that very easy if necesarry, let me know then) （我只搜索标题，而不是正文。有时正文仍然可见，但是活动的li将成为下一个标题。如果需要，您可以很容易地更改它，然后让我知道）

Then after fetching the headline that is still visible, set the active class for the li element.然后在获取仍然可见的标题后，为li元素设置活动类。 I added id for all of them to add the class.我为所有人添加了id以添加类。

 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); } function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } //Fetch scrolling event var isScrolling; window.addEventListener('scroll', function ( event ) { window.clearTimeout( isScrolling ); isScrolling = setTimeout(function() { var active = 0; //Fetch the active element for(var i = 0; i < 8; i++) { if (isScrolledIntoView($("#car-category-"+i))) { $('.car-list li').removeClass('active'); $("#car-link-"+i).parent().addClass('active'); return; } } }, 66); }, false);

 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="car-list"> <li class="active"><a href="javascript:void(0)" class="car-category-link" id="car-link-0" data-id="0"> Honda </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-1" data-id="1"> BMW </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-2" data-id="2"> Mercedes</a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-3" data-id="3"> Volvo </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-4" data-id="4"> Jeep </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-5" data-id="5"> Buggati </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-6" data-id="6"> Ferrari </a></li> <li class=""><a href="javascript:void(0)" class="car-category-link" id="car-link-7" data-id="7"> Audi </a></li> </ul> <div class="table"> <div class="element-title" id="car-category-0"> <h2 class="text-color">Honda</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-1"> <h2 class="text-color">BMW</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-2"> <h2 class="text-color">Mercedes</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-3"> <h2 class="text-color">Volvo</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-4"> <h2 class="text-color">Jeep</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-5"> <h2 class="text-color">Buggati</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-6"> <h2 class="text-color">Ferrari</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> <div class="element-title" id="car-category-7"> <h2 class="text-color">Audi</h2> <span></span> </div> <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar</p> </div>

I used their scrolling script and the accepted answer here .我在这里使用了他们的滚动脚本和接受的答案。 Thanks to them感谢他们

更改侧边栏<li>滚动颜色

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-02-17 19:29:25

更改侧边栏<li>滚动颜色

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-02-17 19:29:25

解决方案1
3 已采纳 2020-02-17 19:29:25