如何创建平滑滚动当我改变位置为固定。我试图添加动画,但它不起作用。最好使用jquery animation();
$(window).scroll(function() {
var sticky = $('.mobile-menu'),
scroll = $(window).scrollTop();
if (scroll >= 40) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
header {
padding: 20px 40px;
background: gray;
width: 100%;
-webkit-transition: position 10s;
-moz-transition: position 10s;
-ms-transition: position 10s;
-o-transition: position 10s;
transition: position 10s;
}
section {
height: 150vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>
最佳答案
您可以使用@keyframes
向滚动条添加一些过渡效果。
$(window).scroll(function() {
var sticky = $('.mobile-menu'),
scroll = $(window).scrollTop();
if (scroll >= 40) {
sticky.addClass('fixed'); }
else {
sticky.removeClass('fixed');
}
});
header {
padding: 20px 40px;
background: gray;
width: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: position 10s;
-ms-transition: position 10s;
-o-transition: position 10s;
transition: all 0.5s ease;
}
section {
height: 150vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
animation: smoothScroll 1s forwards;
}
@keyframes smoothScroll {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>