Прокрутите шпион с помощью JQuery

У меня есть заголовок вверху и 3 столбца внизу. В левой колонке есть меню, в средней колонке текстовый контейнер и еще одна правая колонка.

Когда страница прокручивается вверх, меню поворачивается в фиксированное положение, это работает.

Проблема: при прокрутке страницы каждое меню будет выделено (Scroll Spy), но выделено только последнее меню.

Пожалуйста помоги!

Образец в jsfiddle

$(function () {
    $(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();      
    if (scrollValue > 100) {
      $('#spy').addClass('affix');

      var elemts = $('.scroll-section');
      elemts.each(function(index) {
        var id = $(this).attr('id');
        console.info(id)
        var navElem = $('a[href = "#' + id + '"]');
     navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
      })
      } 
    else{
        $('#spy').removeClass('affix');
      }

    });          
});

CSS

.header {
  width: 100%;
  height: 100px;
  background: yellow;
}
.affix {
  position: fixed;
  top: 0;
}
#spy {
  position: fixed;
}
.right-side {
  background: gray;
  height: 120px;
}

HTML

<body>
<div class = "header">

</div>
<div class = "row">
<div class = "col-sm-3">
<div  id = "spy">
  <ul class = "nav nav-pills flex-column">
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll1">First Section</a>             </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll2">Second Section</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll3">Third Section</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll4">Fourth Section</a>
    </li>
  </ul>
  </div>
</div>
<div class = "col-sm-7">
  <div class = "scroll-section" id = "scroll1">
    <h2>First Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll2">
    <h2>Second Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll3">
    <h2>Third Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll4">
    <h2>Fourth Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
</div>
<div class = "col-sm-2">
  <div class = "right-side">

  </div>
</div>
</div>
</body>

jquery html css

24.05.2019 01:45

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не проверяете, прошла ли верхняя часть каждого раздела верхнюю часть окна. Добавьте этот оператор if вокруг добавления/удаления активного класса:

if ( scrollValue > $(el).offset().top  ){
   var id = $(el).attr('id');
   var navElem = $('a[href = "#' + id + '"]');
   navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
}

jsFiddle Revised Demo

$(function () {
        $(window).on('scroll', function (event) {
            var scrollValue = $(window).scrollTop();
            if (scrollValue > 100) {
              $('#spy').addClass('affix');

              var els = $('.scroll-section');
              els.each(function(index, el) {
                if ( scrollValue > $(el).offset().top  ){
                  var id = $(el).attr('id');
                  var navElem = $('a[href = "#' + id + '"]');
                  navElem.addClass('active').parent().siblings().children().removeClass( 'active' );
                }
              });
            } else {
              $('#spy').removeClass('affix');
            }
        });          
    });

.header {
  width: 100%;
  height: 100px;
  background: yellow;
}
.affix {
  position: fixed;
  top: 0;
}
#spy {
  position: fixed;
}
.right-side {
  background: gray;
  height: 120px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<body>
<div class = "header">

</div>
<div class = "row">
<div class = "col-sm-3">
<div  id = "spy">
  <ul class = "nav nav-pills flex-column">
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll1">First Section</a>             </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll2">Second Section</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll3">Third Section</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#scroll4">Fourth Section</a>
    </li>
  </ul>
  </div>
</div>
<div class = "col-sm-7">
  <div class = "scroll-section" id = "scroll1">
    <h2>First Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll2">
    <h2>Second Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll3">
    <h2>Third Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
  <div class = "scroll-section" id = "scroll4">
    <h2>Fourth Section</h2>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
    <p>
    During Compile time, the compiler converts the source code into Microsoft Intermediate Language (MSIL). Microsoft Intermediate Language (MSIL) are CPU-Independent set of instructions that can be effectively converted to the native code. Now with the help of JIT compiler, IL code can be executed on any computer architecture supported by the JIT compiler.
    </p>
  </div>
</div>
<div class = "col-sm-2">
  <div class = "right-side">
  
  </div>
</div>
</div>
</body>

24.05.2019 02:27

Другие вопросы по теме

Контактная форма PHP, используемая в шаблоне HTML 5, но не отправляемая по электронной почте

Как вставить изображение на страницу одного_продукта, но не внутри связанных продуктов

Как передать значение переменной как идентификатор documentGetElementByID

3 массива в d3.js — как вызывать другие массивы?

Попытка создать кнопку удаления динамически и вызвать функцию удаления в javascript

Передайте массив строк в компонент React со строкой, полученной из файла json, и разрешите встроенные теги span

Можно ли смешивать bootstrap 3.3 и bootstrap 4.1? Я пробовал, и это ломает сайт

Использование wow.js внутри прокручиваемого элемента div

Как я могу заставить этот элемент ввода заполнить все оставшееся пространство на странице, не переходя на следующую строку?

Отображение свойств не будет работать с медиа-запросами

Прокрутите шпион с помощью JQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы