Доброго времени суток!
Помогите решить такую проблему.
Есть фиксированная навигация, с 5 элементами.
Так же есть 5 контейнеров на странице, нужно сделать так что бы допустим когда находишься на первой секции к первому элементу в навигации добавлялся класс, когда на втором - второму, и т.д.
есть у меня вот такой код
$(window).scroll(function() {
if ($(window).scrollTop() <= 900) {
$('#first').addClass("current");
}
else {
$('#first').removeClass("current");
}
if ($(window).scrollTop() >= 988 && $(window).scrollTop() <= 1899) {
$('#second').addClass("current");
}
else {
$('#second').removeClass("current");
}
if ($(window).scrollTop() >= 1900 && $(window).scrollTop() <= 2899) {
$('#third').addClass("current");
}
else {
$('#third').removeClass("current");
}
if ($(window).scrollTop() >= 2900 && $(window).scrollTop() <= 3699) {
$('#fourth').addClass("current");
}
else {
$('#fourth').removeClass("current");
}
if ($(window).scrollTop() >= 3700) {
$('#fifth').addClass("current");
}
else {
$('#fifth').removeClass("current");
}
});
сделано на скорую руку, знания js у меня не большие.
все конечно работает, но клиент попросил сделать поддержку разрешения высотой в 800 (что бы инфа умещалась на одном экране)
вот тут то самая загвоздка, если через медиа запросы я буду изменять стили, то высота измениться, и мой код будет уже не рабочим,
вопрос в том как сделать чтобы вместо конкретной высоты (прописанной руками) сам скрипт расчитывал высоту каждого контейнера ( те что 5 штук) и сам составлял правильное условие.
Надеюсь на вашу помощь.
Демо