相关疑难解决方法(0)

我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.

我究竟做错了什么？

这是我的工作版本:

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: …