Я пытаюсь заставить свой липкий заголовок иметь эффект перехода, чтобы он уменьшался, а не просто мгновенное движение.
Что я делаю не так?
Вот моя рабочая версия:
http://codepen.io/juanmata/pen/RVMbmr
В основном следующий код добавляет класс, маленький к моему классу-оболочке, это отлично работает.
$(window).on('load', function() {
$(window).on("scroll touchmove", function () {
$('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
Здесь часть CSS:
.wrapper {
grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tiny {
grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
Таким образом, заголовок действительно сокращается, как и должно быть, но нет анимации, я что-то пропустил или переходы просто не работают с сеткой?
Здесь ссылка на документы css-grid.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
$(window).on('load', function() {
$(window).on("scroll touchmove", function() {
$('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
* {
margin:0;
padding:0;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
grid-template-areas:
"head head head head"
"main main main main"
"leader leader leader leader"
"foot foot foot foot";
background-color: #fff;
color: #444;
}
.tiny {
grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.box .box {
background-color: lightcoral;
}
.head {
grid-area: head;
background-color: #999;
z-index: 2;
display: grid;
grid-gap: 0px;
grid-template-columns: 20% 1fr;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
position: sticky;
top: 0;
}
.logo{
height: inherit;
grid-column: 1;
grid-row: 1;
background-color:red;
position: relative;
overflow: hidden;
}
.logo img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: 100%;
height: auto;
}
.main {
grid-area: main;
/* CSS Grid */
z-index: 1;
grid-column: head-start / head-end;
grid-row: head-start / leader-start;
background-color: red;
}
.leader {
grid-area: leader;
z-index:1;
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(4, 1fr );
}
.foot {
grid-area: foot;
z-index:1;
}
<div class="wrapper">
<div class="box head">
<div class="box logo">
<a href="#"><img src="https://unsplash.it/200/300/?random" /></a>
</div>
<div class="box nav">nav</div>
</div>
<div class="box main">main</div>
<div class="box leader">
<div class="box leader-1">1</div>
<div class="box leader-2">2</div>
<div class="box leader-3">3</div>
<div class="box leader-4">4</div>
</div>
<div class="box foot">foot</div>
</div>