#javascript #html #css
#javascript #HTML #css
Вопрос:
Прямо сейчас я успешно анимировал панель навигации при прокрутке страницы вниз. Однако, когда я возвращаюсь к началу, он немедленно сбрасывается, поэтому веб-сайт работает не так гладко, как хотелось бы. Кто-нибудь может мне помочь с этим, используя Javascript? Вот что у меня есть на данный момент:
JavaScript
$(function () {
$(document).scroll(function () {
var $nav = $(".topnav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
$(document).scroll(function () {
var $nav = $(".topnav");
$nav.toggleClass('unscrolled', $(this).scrollTop() == $nav.height());
});
});
CSS
.topnav.scrolled {
background-color: #000000;
transition: background-color 200ms linear;
}
.topnav.unscrolled {
background-color: transparent;
transition: background-color 200ms linear;
}
Раздел «развернутый» не работает, поэтому вы можете игнорировать его.
Ответ №1:
Не видя определения ваших классов CSS, мне интересно, добавляется ли ‘unscrolled’ вместе с ‘scrolled’, вызывая конфликт.
Можем ли мы увидеть, где вы объявляете оба .scrolled
и .unscrolled
?
В то же время, не зная ничего другого, я бы попробовал так:
$(function () {
$(document).scroll(function () {
var $nav = $(".topnav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); // add class 'scrolled' when doc.scrollTop > nav.height, remove when not
$nav.toggleClass('unscrolled', $(this).scrollTop() <= $nav.height()); // add scroll 'unscrolled' when doc.scrollTop <= nav.height, remove when hot
});
});
Комментарии:
1. Я только что обновил свой вопрос! Спасибо, что помогли мне.
2. Unscrolled по-прежнему не работает. Может ли это быть мой css?
Ответ №2:
Обычно я использую jQuery, и заголовок у меня фиксированный в css, а затем это добавляет класс при прокрутке, когда пользователь прокручивает половину страницы, поэтому он не меняется мгновенно при прокрутке.
$(window).scroll(function() {
var $topNav = $(".topnav"),
$scroll = $(window).scrollTop(),
$wh = window.innerHeight / 2;
if ($scroll > $wh) {
$topNav.addClass("scrolled");
} else {
$topNav.removeClass("scrolled");
}
});
Вы можете изменить $ wh на все, что захотите, число или пиксели сверху и т. Д…
Комментарии:
1. Будет ли это реанимироваться до исходного цвета topnav при прокрутке назад к началу? Если нет, то как я могу это сделать?
2. Да, вам не нужно добавлять 2 класса, просто создайте .topnav так, как он должен выглядеть, а затем style .scroll так, как вы хотите, чтобы он выглядел при добавлении класса. Стиль перехода должен быть только в .topnav, а не в теге .scroll . Вы хотите, чтобы topnav всегда анимировался, поэтому не удаляйте и не пытайтесь добавить его снова.