У меня есть 10 элементов навигации в левом столбце (раздел 1-10), которые относятся к 10 разделам div в правом столбце.
Что я хочу сделать, так это заполнить цвет фона каждого элемента навигации (слева направо с цветом) в зависимости от того, как далеко я прохожу каждый раздел.
Итак, я на полпути к разделу 1, он заполнен на 50%. Как только я прокручиваю до раздела 2, этот элемент навигации начинает заполняться и т. д.
Любые идеи о том, как я могу заставить это работать?
Если вы сравните метод JQuery scrollTop() с высотой определенного раздела, вы можете определить, насколько далеко он находится через один:
var percentage = $("nav").scrollTop() / $("#section1").height() * 100;
Для каждого последующего раздела нужно будет сравнить [прокрутить МИНУС высоту всех предыдущих разделов] с высотой текущего раздела.
background: linear-gradient(to right, #A1C866 49%,#A1C866 49%,#EDEDED 49%); for example?
- person Daniel; 20.06.2018
Интересно... значит, вы используете градиент как индикатор прогресса? Как только вы получите процентное значение, используя расчет, который я упомянул, вы можете использовать этот процент для первого цвета, но тогда вам не нужно указывать процентное значение второго цвета, так как оно просто занимает все остальное... вот так:
$("nav").css({"background": "linear-gradient(to right, #A1C866 " + percentage + "%, #EDEDED)"});
Затем он просто показывает индикатор того, как далеко пользователь прокрутил текущий раздел.
Кроме того, получить высоту каждого раздела проще всего, указав им все идентификаторы (например, в моем примере, section1, section2 и т. д.)... тогда вы можете получить каждую высоту с помощью jquery:
$("#section1").height() + $("#section2").height() ...
вы даже можете использовать цикл для их просмотра, пока он не превзойдет текущий scrollTop, тогда вы узнаете, какой из них просматривается в данный момент.
