ロン-999：
スクロール上の変化に左のサイドバースティッキーリーの背景色にする方法？
私はBMWをスクロール場合は、サイドバー上のBMWの背景色が緑色でなければなりません。
以下のコードを参照してください。
李さんは、クリックイベントの場合と同じ背景を持っている必要がありますので、私たちはスクロールしたとき。
任意の助けいただければ幸いです。前もって感謝します。
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>
Davidev：
だから、私は解決策を考え出しました。まず、すべてのオフ、あなたのカテゴリを修正する必要があります。missmatchがありました。あなたは「ボルボ」を押すと、それは「メルセデス」に行ってきました。
ユーザーがスクロールを終えたとき、それでは私がやったことは、イベントリスナーを作成しています。そして、我々の見解ではまだ見えている見出しをチェック。私たちは、最初の見出しで始まり、それぞれを確認してください。最初に見つかっなっている一つは、アクティブであることを行っている私たちの新しい要素になります。（私は唯一のメインテキストは、見出しのためではない探しています。時にはメインテキストはまだ見ることができ、しかし、アクティブはli、次の見出しになります。necesarry場合は、非常に簡単にそれを変更することができ、私はそれから知っています）
次いで、まだ表示されている見出しをフェッチした後に、アクティブクラスを設定する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>