固定位置的光滑滾動頭

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

添加類名「導航欄固定頂」到你的資產淨值，這是所有。從那裏你有一個簡單的啓動類似的粘性導航。