Изменить цвет боковой панели <li>на свитке - PullRequest
Новая
       1

Изменить цвет боковой панели <li>на свитке

3 голосов
/ 17 февраля 2020

Как сделать так, чтобы при прокрутке цвет фона левой боковой панели изменялся?
Если я прокручиваю BMW, цвет фона BMW на боковой панели должен быть зеленым.
Пожалуйста, посмотрите фрагмент кода ниже.
Так что у li должен быть тот же фон, что и при щелчке, но когда мы прокручиваем.
Любая помощь будет оценена. Заранее спасибо. 

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>

1 Ответ

3 голосов
/ 17 февраля 2020

Итак, я придумал решение. Прежде всего, вы должны исправить свои категории. Произошло несоответствие. Вы нажали «Вольво», и он перешел к «Мерседес».

Итак, я создал слушателя событий, когда пользователь закончил прокрутку. Затем проверьте, какой заголовок все еще виден в нашем представлении. Мы начинаем с первого заголовка и проверяем каждый. Тот, который будет найден первым, будет нашим новым элементом, который будет активным. (Я ищу только заголовки, а не основной текст. Иногда основной текст все еще может быть виден, однако следующим заголовком будет активный li. Вы можете изменить это очень легко, если нужно, дайте мне знать тогда)

Затем, после извлечения заголовка, который все еще видим, установите активный класс для элемента li. Я добавил 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>

Я использовал их скрипт прокрутки и принятый ответ здесь . Благодаря им

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...