Как применить анимацию к блоку при скроллинге ниже определенной точки?
Проблема с анимацией. Планируется, что меню navBar при скроллинге ниже header будет плавно менять прозрачность и становиться fixed, а при возвращении назад всё так же плавно убирается. На деле происходит единственная анимация. Появление анимируется как надо, а вот остальные анимации происходят как если бы не было вызова .animate()
Подскажите, как сделать действие обратное появлению и почему анимация происходит только первый раз? $(window).scroll(function(){ if(($(window).scrollTop()>$navBarHeight)&&($(window).scrollTop()<$headerHeight+17)){
$(".navBar").css({"opacity":"0"});
}else if($(window).scrollTop()<$navBarHeight){
$(".navBar").css({"opacity":"1"});
}
if (($(window).scrollTop()>$headerHeight)){
$(".navBar").animate({
opacity:1
},1500);
$("header").css({"margin-top":$(".navBar").height()});
$(".navBar").addClass("stick"); }else {
$(".navBar").removeClass("stick");
$("header").css({"margin-top":0});
}
});
Ответ
Чтобы исключить выставления свойства opacity в стиле у конкретного элемента, лучше использовать css-классы вместо js функций. В данном случае можно просто добавить класс, например .inv {
opacity: 0;
}
который надо использовать, когда нужно скрыть элемент и добавить в класс, например stick, transition для свойства opacity transition: opacity 1.5s ease;
Пример
$(document).ready(function() {
$headerHeight = $("header").height();
$navBarHeight = $(".navBar").height();
$(window).resize(function() {
$navBarHeight = $(".navBar").height();
$headerHeight = $("header").height();
});
$(window).scroll(function() {
if (($(window).scrollTop() > $navBarHeight) && ($(window).scrollTop() < $headerHeight + 17)) {
$(".navBar").addClass('inv');
} else if ($(window).scrollTop() < $navBarHeight) {
$(".navBar").removeClass('inv');
}
if (($(window).scrollTop() > $headerHeight)) {
$("header").css({
"margin-top": $(".navBar").height()
});
$(".navBar").addClass("stick");
} else {
$(".navBar").removeClass("stick", 1000);
$("header").css({
"margin-top": 0
});
}
});
});
section {
height: 400px;
}
body {
font-family: "RobotoRegular";
}
a,
a:active,
a:link,
a:visited {
text-decoration: none;
color: #679FD2;
}
nav {
background-color: black;
}
nav .current,
nav a:hover {
color: #BF8430;
border-left: 1px solid #BF8430;
border-right: 1px solid #BF8430;
transition: 0.5s ease;
}
nav a:not(:hover) {
transition: 0.5s ease;
}
nav a {
display: block;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 10px;
}
nav ul {
height: 100%;
font-size: 25px;
margin: 0 0;
list-style: none;
}
nav ul li {
height: 100%;
text-align: center;
}
.inv {
opacity: 0;
}
.stick {
position: fixed;
width: 100%;
top: 0;
left: 0;
opacity: 1;
z-index: 5;
transition: opacity 1.5s ease;
}
header {
background-color: #FF4540;
color: white;
padding-top: 20px;
font-size: 30px;
}
header .logoBlock {
margin: 0 auto;
}
header #firstWords {
font-family: "AdineKirnbergRegular", Times, sans-serif;
font-size: 70px;
}
header #secondWords {
font-family: "AdineKirnbergRegular", Times, sans-serif;
font-size: 50px;
margin-left: 40px;
margin-top: -30px;
margin-bottom: 60px;
}
header .face {
border-radius: 300px;
width: 100%;
height: auto;
}
.something {
font-size: 40px;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem id voluptate nulla incidunt voluptas quo nesciunt, explicabo, qui aut dolorum esse commodi inventore veritatis hic modi nam dolorem placeat sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel earum consectetur minus, aliquam nostrum odio molestias odit officia, fugit tempora amet perspiciatis nemo dicta repellat magni quisquam vitae nobis quidem.
Magnam quae, laboriosam dignissimos eligendi! Atque exercitationem harum aperiam provident non illum tempore eos incidunt obcaecati, ut adipisci explicabo blanditiis iste ducimus dolore fuga magni odit cupiditate voluptatibus quis facere!
Inventore sapiente omnis autem id ullam, cumque accusantium, nemo doloremque enim voluptas iste vitae. Eligendi delectus ipsam voluptate! Libero quam itaque eum nobis quia numquam corporis, tenetur officiis facilis deleniti?
Est vitae vero culpa corporis ex ipsa, atque, illum quas illo quibusdam cum beatae magni eum quidem magnam iste laboriosam distinctio sequi temporibus tenetur. Non eum nesciunt excepturi, eaque libero!
Quibusdam accusantium nemo minus praesentium eligendi quis, placeat quo. Ab eum fugit nesciunt labore qui eius iure ex. Ab excepturi labore distinctio delectus ullam vitae architecto unde culpa repellat ipsum?
Vero dolores aspernatur repudiandae iure consequatur laudantium sapiente impedit quas at facilis illum modi similique quidem asperiores sint vitae voluptate consequuntur consectetur tenetur, voluptates eligendi numquam! Magni nam, voluptate voluptatibus.
Atque ducimus, repellat, nulla quae magnam iure eius ad quo ab at, quod dolor. Enim at quisquam, itaque aspernatur quam adipisci iusto consectetur consequuntur ducimus! Quaerat aspernatur ipsam earum vero.
Quibusdam sunt maxime magni temporibus, velit fugit ducimus sed eum rem doloremque voluptatem reprehenderit dignissimos, aut inventore vero. Iste ipsam at in velit, doloribus, a. Distinctio accusamus, veniam ratione voluptatibus.
Asperiores temporibus quae aspernatur quos. Enim doloribus nesciunt nihil dignissimos consequuntur officiis. Quia possimus molestias iusto dicta atque, modi officia, assumenda beatae quod, minus repudiandae? Molestias nihil deleniti, aut asperiores?
A, tempore dignissimos eaque laudantium asperiores explicabo perferendis. Accusantium necessitatibus beatae, laboriosam fugit dolor tempora! Totam quod doloribus porro ad beatae quae pariatur perspiciatis, esse nihil iste tenetur quidem voluptatum?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ratione odit, laboriosam delectus maxime quod quisquam ipsum iste sit impedit excepturi consequatur eaque eos vel molestias tempore atque commodi, voluptate.
Similique consectetur ducimus quo tempora. Ad dolorum molestias nostrum, aspernatur reiciendis a provident sed consequatur quod ullam vero fuga quia ratione quam eligendi magnam debitis consequuntur eos quae, esse odio.
Magnam ad tempora animi sint officiis iure quibusdam optio ullam libero cumque vitae aperiam dolores molestias architecto temporibus dolor mollitia sunt consequuntur eveniet molestiae, esse sed! Sapiente, error vero aperiam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, veritatis optio suscipit at odio enim, velit dolores quaerat placeat incidunt excepturi, nisi veniam, recusandae nobis tempore? Ab aliquam enim nobis.
Sequi magni, veniam omnis, soluta facere saepe deserunt harum a quasi tenetur quibusdam! At doloribus inventore molestiae debitis alias ipsum commodi, natus explicabo accusantium a non, dicta blanditiis necessitatibus hic!
Quos nemo praesentium expedita veritatis. Repellendus quod accusantium autem, odio perspiciatis. Cum sit, unde velit recusandae in tenetur, tempora eveniet sapiente molestias. Dolores amet, fugiat debitis perferendis, mollitia deleniti corporis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum tempore in sed consequuntur non facere rerum aliquid, modi voluptas explicabo. Accusamus quibusdam rem doloremque, sed rerum unde repudiandae blanditiis et.
Ipsa dolore natus accusamus aperiam consequuntur tempora ut repellat ullam esse, ea reiciendis magnam cupiditate nobis labore cum nostrum voluptatibus possimus soluta. Magnam quisquam iste necessitatibus cum soluta cupiditate reiciendis.
Dolor, labore esse dicta quibusdam hic totam, ipsum obcaecati voluptate quaerat blanditiis ab aliquid cumque quia veritatis voluptatum rerum consequuntur quisquam, vero maxime nobis repellendus architecto minus aspernatur sapiente. Eos!
Комментариев нет:
Отправить комментарий