Как изменить стиль элемента при прокрутке с помощью jquery

#jquery #html #css

#jquery #HTML #css

Вопрос:

Мне было интересно, есть ли способ изменить стиль навигации при прокрутке пользователями вниз — вот пример кода

 <div id="navigation">....</div>
<div id="about">....</div>
    <div id="portfolio">....</div>
    <div id="footer">....</div>
 

#navigation является абсолютным и поэтому всегда находится в верхней части страницы. Мне было интересно, могу ли я показывать навигацию только тогда, когда окно прокручивается в начале каждого раздела.

Итак, в начале это видно, когда пользователи начинают прокручивать, оно исчезает, когда отображается раздел #about, #navigation исчезает и исчезает при прокрутке вниз.

Я попытался получить местоположения для #about, #portfolio и #footer таким образом:

 margin_top = $("#obsticalSC").css("margin-top");
 

а затем создайте оператор if, в котором говорится, что если верхний край #navigation равен указанному выше, покажите его. Однако приведенный выше код не работает.

Спасибо

Ответ №1:

поскольку вы используете jQuery, это может быть полезно:

jQuery scrollTop

это позволяет получить информацию о положении элемента и о том, насколько сильно он прокручивается.

скорее всего, я предполагаю, что вы делаете одну страницу с динамическим контентом (отображая тот или иной). вы можете сделать

 $("#about").scrollTop();
 

чтобы узнать, сколько прокручивается вверх в разделе about, или вы могли бы изменить его на:

 $("body").scrollTop();
 

если вы используете полосы прокрутки страницы. вы можете проверить, насколько он прокручен вверх, и сделать свое дело с исчезновением.