固定位置的平滑滚动 header
Smooth scroll header with fixed position
当我将位置更改为固定时如何创建平滑滚动。我尝试添加动画,但它不起作用。最好使用 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>
根据评论编辑。
如果在滚动时将 position
更改为 fixed
,则会产生不需要的跳转行为。
你最好的选择是在滚动时防止定位,在 40px
之后或从一开始就设置 fixed
几乎是一样的,所以我建议你删除你的 jQuery,然后让你的 header
fixed
从头开始:
//if (scroll >= 40) sticky.addClass('fixed');
//else sticky.removeClass('fixed');
下面的片段:
$(window).scroll(function() {
var sticky = $('.mobile-menu'),
scroll = $(window).scrollTop();
});
body {
position: relative;
}
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;
position: relative;
top: 60px;
}
.fixed {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu fixed">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>
当我将位置更改为固定时如何创建平滑滚动。我尝试添加动画,但它不起作用。最好使用 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>
根据评论编辑。
如果在滚动时将 position
更改为 fixed
,则会产生不需要的跳转行为。
你最好的选择是在滚动时防止定位,在 40px
之后或从一开始就设置 fixed
几乎是一样的,所以我建议你删除你的 jQuery,然后让你的 header
fixed
从头开始:
//if (scroll >= 40) sticky.addClass('fixed');
//else sticky.removeClass('fixed');
下面的片段:
$(window).scroll(function() {
var sticky = $('.mobile-menu'),
scroll = $(window).scrollTop();
});
body {
position: relative;
}
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;
position: relative;
top: 60px;
}
.fixed {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu fixed">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>