Bollate

HTML

[ANSWERED] javascript – Change side bar’s
  • color on scroll

    • By

    Nov 20, 2022 , , ,

    Solution 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)

    Then after fetching the headline that is still visible, set the active class for the li element. I added id for all of them to add the class.

    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

    Problem :

    How to make left sticky sidebars li’s background color to change on scrolling?

    If I scroll through BMW then BMW’s background color on the sidebar should be green.
    Please see the code snippet below.
    So li’s should have the same background as on click event but when we scroll.
    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>

    Comments

    Comment posted by Roko C. Buljan

    Ah, so you want Audi to

    Comment posted by jsfiddle.net/cse_tushar/Dxtyu/141

    @Rony, Check this :

    Comment posted by Rony-999

    @Roko C. I want sidebars li to change color on scroll

    Comment posted by Roko C. Buljan

    @Rony-999 scroll to bottom. If both Ferrari and Audi articles are still visible (which is your case) can you explain what link should be highlighted? For your idea to work – every article, or at least the last one should have a

    Comment posted by Rony-999

    @AkshayPrabhakar This example is with href, I dont use that since when you click on filter element and then click go back to a previous page you cant do that at first click.

    Comment posted by Rony-999

    thank you so much! Could you please help further, I have edited snippet. Is it possible now to change li’s background when the title is just close to input?

    Comment posted by davidev

    @Rony-999 You mean which title is the closest to the fixed input field?If the input field is fixed at the top, it should get the same result, shouldn’t it?

    Comment posted by Rony-999

    let me explain again since English is not my mother tongue. if the fixed input close to h2 title then change the background color of li

    Comment posted by Rony-999

    is that achievable?

    Comment posted by Rony-999

    one more time just in case) if we scroll down and for example, the input gets just close to BMW then BMW li background is changed and if we scroll up and reach 2/3 size(from one title to another) of h2 above the BMW then HONDA li background is changed. I have added more text in code snippets for the sake of simplicity.

    By

    Related Post

    HTML

    [ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

    Nov 20, 2022
    HTML

    [ANSWERED] python – Extract text from a class in HTML using CSS language

    Nov 20, 2022
    HTML

    [ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

    Nov 20, 2022

    You missed

    HTML

    [ANSWERED] javascript – Text box to display updated text and save on button click

    Nov 20, 2022
    HTML

    [ANSWERED] javascript – Pass html tag to angularjs variable from controller

    Nov 20, 2022
    HTML

    [ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

    Nov 20, 2022
    HTML

    [ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

    Nov 20, 2022