JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#d1">d1</a>

    </li>
    <li><a href="#d2">d2</a>

    </li>
    <li><a href="#d3">d3</a>

    </li>
    <li><a href="#d4">d4</a>

    </li>
</ul>
<div id="d1">Различают два вида рефератов: продуктивные и репродуктивные. Репродуктивный реферат воспроизводит содержание первичного текста. Продуктивный содержит творческое или критическое осмысление реферируемого источника. Репродуктивные рефераты можно разделить еще на два вида: реферат-конспект и реферат-резюме. Реферат-конспект содержит фактическую информацию в обобщённом виде, иллюстрированный материал, различные сведения о методах исследования, результатах исследования и возможностях их применения. Реферат-резюме содержит только основные положения данной темы. В продуктивных рефератах выделяют реферат-доклад и реферат-обзор. Реферат-обзор составляется на основе нескольких источников и сопоставляет различные точки зрения по данному вопросу. В реферате-докладе, наряду с анализом информации первоисточника, есть объективная оценка проблемы; этот реферат имеет развёрнутый характер. Реферат программы При регистрации в Роспатенте программы для ЭВМ следует добавить к ней реферат. Объем реферата — до 700 символов (10-12 строк), должен содержать сведения о назначении, области применения и функциональных возможностях программного продукта. Обычно указывается: тип реализующей ЭВМ; язык программирования; операционная система; оллддолрд объем полного исходного текста программы в Кб. Структура и признаки реферата Реферат имеет определенную композицию: Введение. Во вступлении обосновывается выбор темы, могут быть даны исходные данные реферируемого текста (название, где опубликован, в каком году), сообщены сведения об авторе (Ф. И. О., специальность, учёная степень, учёное звание), раскрывается проблематика выбранной темы; Основная часть. Содержание реферируемого текста, приводятся и аргументируются основные тезисы; Вывод. Делается общий вывод по проблеме, заявленной в реферате. Реферат имеет следующие...

CSS

ul {
    background-color: #fff;
    position:fixed;
}
.current, .current a {
    color: #cc0000;
}

JavaScript

$(document).scroll(function () {
    $('a[href^=#]').each(function () {
        //Получаем атрибуты якорей
        anchor = $(this).attr('href');
        rep = anchor.replace(/#/g, '');
        //Находим ид элементов, равные якорям, получаем значение TOP
        var atr = $('#' + rep).offset().top;
        //добавляем атрибут элементам с данным значением
        $('#' + rep).attr('data-top', atr);
        //Получаем значение отступа прокрутки у документа
        var top = $(document).scrollTop();
        //УСЛОВИЕ -> Если значение документа больше, чем значение аттрибута у элемента, добавляем данному элементу класс, у остальных убираем.
        if (top >= $('#' + rep).attr('data-top')) {
            $(this).parent().addClass('current').siblings().removeClass('current');
        }
    });


});