#javascript #jquery #css #scroll
#javascript #jquery #css #прокрутка
Вопрос:
Я пытаюсь добавить класс к каждому из моих LI элементов в зависимости от того, как далеко прокручивается страница.
Если мой видовой экран 2000px высокий, в первом li после .active должен быть добавлен класс « 500px «. Затем, после еще одного 500px прокрутки вниз, второй LI должен был применить класс « active «, а предыдущий LI должен был удалить класс и так далее.
JavaScript должен вычислять пиксели на основе высоты окна просмотра, потому что я не всегда знаю, какой высоты страница.
Я знаю, что это возможно с помощью jquery и некоторых других (каждого), но я не знаю, как и с чего начать. Любая помощь очень ценится. 🙂
.wrapper {
min-height: 2000px;
}
.header {
position: fixed;
width: 100%;
background: #eee;
right: 0;
left: 0;
top: 0;
}
ul {
position: relative;
list-style: none;
height: 35px;
margin: 0;
padding: 0;
}
li {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all .2s ease;
transform: translateY(100%);
line-height: 35px;
margin: 0;
padding: 0 20px;
}
li.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
} <div class="wrapper">
<div class="header">
<ul class="list">
<li>I wil lbe visible after a threshold of 500px</li>
<li class="active">I should be visible when user has scrolled (pageheight - 500px / 4)</li>
<li>I should be visible when user has scrolled (pageheight - 500px / 4) * 2 </li>
<li>I should be visible when user has scrolled (pageheight - 500px / 4) * 3 </li>
</ul>
</div>
</div> Я создал этот небольшой пример, чтобы продемонстрировать разметку:
https://jsfiddle.net/a1hq5tg3/2 /
Комментарии:
1. Вы забыли включить JS, который пытались использовать сами
2. Вы имеете в виду что-то вроде этого (см. демо): callmenick.com/post /…
3. @RoryMcCrossan Нет, мне нужен JS. Я понятия не имею, как это закодировать на самом деле 🙂
4. @Victor Да, но мне нужно, чтобы переключать имена классов на основе количества прокрутки, а не на divs, которые становятся видимыми при прокрутке. Так что не совсем то же самое 🙂
5. Можете ли вы использовать проценты? Если вы можете, это может сработать для вас: jsfiddle.net/wdwb3uh3/6
Ответ №1:
Вы можете использовать встроенное событие браузера для проверки текущей позиции прокрутки, чтобы обновить требуемый «li» на основе диапазона прокрутки
window.onscroll = function(args) {
console.log(document.body.scrollTop);
if(document.body.scrollTop > 200 amp;amp; document.body.scrollTop < 300) {
document.getElementsByClassName('active')[0].className.replace('active', '');
document.getElementsByTagName('li')[next].className = ' active';
}
};
Комментарии:
1. Спасибо за ваш ответ. Нет, это не делает то, что я хочу. Я хочу, чтобы он вычислял высоту страницы и отображал LI при прокрутке. (Я на самом деле не эксперт в js) : (
2. Почему бы и нет? Это событие срабатывает каждый раз, когда вы прокручиваете свой документ. Таким образом, вы можете выбирать диапазоны, когда элемент должен быть показан или скрыт. if (pos> 0 amp;amp; pos < 10) показать el1 еще, если (pos >= 10 amp;amp; pos <20) показать el2 еще, если …
3. Возможно, это просто мои навыки кодирования. Можете ли вы заставить это работать в моем примере jsfiddle? Я не очень разбираюсь в JS
4. Скрипка @VadimB мне нравится. Единственная проблема в том, что в OP сказано, что высота страницы не всегда будет 2000 пикселей — если вы объедините свой мой fiddle. Это должно сработать: jsfiddle.net/wdwb3uh3/9
Ответ №2:
Мой ответ в результате @VadimB и моих комментариев / ответов.
$(window).on('scroll', function() {
var windowSize = $(window).scrollTop(),
documentSize = $(document).height() - $(window).height();
$('li').removeClass('hello');
if (windowSize < (documentSize) * 0.25) {
$('li').removeClass('hello');
} else if (windowSize < (documentSize) * 0.50) {
$('li:nth-child(2)').addClass('hello');
} else if (windowSize < (documentSize) * 0.75) {
$('li:nth-child(3)').addClass('hello');
} else if (windowSize > (documentSize) * 0.75) {
$('li:nth-child(4)').addClass('hello');
}
});