Я использую fullpage.jsfullpage.js - добавить класс CSS для заголовка при прокрутке внутри секции
https://github.com/alvarotrigo/fullPage.js/
на главной странице веб-сайта и подмигнули работает нормально до сих пор.
У меня есть 4 раздела. Первый раздел имеет больше контента, чем высота окна браузера, поэтому необходимо прокручивать внутри этого раздела. Я добавил полосу прокрутки, и она работает с полосой прокрутки и с помощью колесика мыши.
Теперь моя проблема. У меня есть липкий заголовок, который я хочу уменьшить по высоте, как только прокручивается внутри этого раздела (и увеличивайте высоту, как только я прокручу назад вверх). Поэтому я хотел бы добавить класс css «sticky» в «header» при использовании полосы прокрутки fullpage.js или колесика мыши, чтобы я мог форматировать заголовок с классом «липкий» по-разному с css.
К сожалению, «прокручивать-Events» работу здесь это не распространяется, как уже упоминалось здесь: FullPage.JS Scrolling
Я попробовал следующее
$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})
Этот вид работ, однако липкое класс не добавленный при первом использовании колесика мыши (он добавлен «вторым поворотом колесика мыши») и не удаляется при прокрутке назад вверх, мне нужно повернуть колесо еще раз после прокрутки назад снова удалить липкий класс.
Если я изменяю if-statement на> = 0, он работает при первом повороте колеса мыши, но затем я не удаляю класс при прокрутке вверх.
Вторая проблема в том, что это работает только с помощью колесика мыши, конечно, а не путем перетаскивания скроллбар созданный fullpage.js
Любые идеи или советы, как решить эту проблему?
Благодаря Джон