平滑的滚动标题与固定的位置。

How to create smooth scroll when I change the position to fixed. I try to add the animation but it does not work. Better use jquery animation();

当我将位置更改为固定时，如何创建平滑的滚动。我试图添加动画，但它不起作用。更好地利用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>

3 个解决方案

#1

You can use @keyframes to add some transition effects to the scroll.

您可以使用@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>

#2

EDITED based on comment.

基于评论的编辑。

If you change position to fixed while scrolling, it will generate undesired jump behavior.

如果在滚动时将位置更改为固定，则会产生不希望的跳转行为。

Your best bet would be to prevent positioning while scrolling, setting fixed after 40px or from the start is pretty much the same, so I'd suggest you remove this part on your jQuery, and make your header fixed from the start:

你最好的办法是在滚动的时候避免定位，设置固定在40px之后或者从一开始就差不多是一样的，所以我建议你在jQuery上去掉这部分，从一开始就把你的标题固定下来:

//if (scroll >= 40) sticky.addClass('fixed');
//else sticky.removeClass('fixed');

Snippet below:

代码片段如下:

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

#3

If you are looking for a simple and effective way of implementing a sticky header I would suggest using Bootstrap. It is easy to get going and all the heavy lifting is already done for you.

如果您正在寻找一种简单有效的方法来实现粘性头文件，我建议您使用Bootstrap。开始很容易，所有的重担都已经为你完成了。

Follow the quick start

按照快速启动

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

https://v4-alpha.getbootstrap.com/getting-started/introduction/快速启动

Add the class name "navbar-fixed-top" to your nav and that is all. From there you have a similar sticky nav with simple start up.

将类名“navbar-fixed-top”添加到你的nav中，仅此而已。从那里你有一个类似的粘性资产净值与简单的启动。

#1