固定位置的光滑滚动头

Question

如何在将位置更改为固定位置时创建平滑滚动。我尝试添加动画，但它不起作用。更好的使用jQuery的动画（）;

$(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>

Answer 1

您可以使用@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 { 
 
\t 0% { 
 
\t \t transform: translateY(-40px); 
 
\t } 
 
\t 100% { 
 
\t \t transform: translateY(0px); 
 
\t } 
 
}

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

Answer 2

编辑基于评论。

如果在滚动时将position更改为fixed，则会产生不希望的跳转行为。

最好的办法是防止定位在滚动，40px后或从一开始就设定fixed几乎是一样的，所以我建议你在你的jQuery删除此部分，并从一开始就使你的headerfixed ：

//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>

Answer 3

如果你正在寻找一个简单而有效的方式来实现一个粘头，我会建议使用Bootstrap。这很容易，所有的繁重工作已经完成了。

按照快速启动

https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

添加类名“导航栏固定顶”到你的资产净值，这是所有。从那里你有一个简单的启动类似的粘性导航。