平滑滚动头与固定位置 [英] Smooth scroll header with fixed position

问题描述

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

$（window）.scroll（function （）{var sticky = $（'。mobile-menu'），scroll = $（window）.scrollTop（）; if（scroll> = 40）sticky.addClass（'fixed'）; else sticky.removeClass（' ';}）;

header {padding：20px 40像素;背景：灰色;宽度：100％; -webkit-transition：位置10s; -moz-transition：位置10s; -ms-transition：位置10s; -o-transition：位置10s; transition：position 10s;} section {height：150vh;}。fixed {position：fixed; top：0;左：0; width：100％;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><header类= 移动菜单 >此处文字< /报头> ;<节>糖李子松饼饼干糕点燕麦蛋糕糖霜糖果手杖巧克力。 Gummi熊chupa chups水果蛋糕甜点果冻。松饼饼干冰淇淋酥皮点心棒棒糖姜饼甜点。 Unerdwear.com糖果糖杏仁糖糖果gummies巧克力蛋糕gummi熊粉。 Unerdwear.com馅饼halvah巧克力蛋糕糖果甘草。糖梅子巧克力棒糕点甘草糖粉果冻粉。果冻鳕鱼卷应用焦糖。小杏仁饼糖果tootsie卷甜甜圈。 < / 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;背景：灰色;宽度：100％; -webkit转换：全部0.5s缓解; -moz-transition：位置10s; -ms-transition：位置10s; -o-transition：位置10s;过渡：所有0.5s缓解;}节{height：150vh;}。fixed {position：fixed; top：0;左：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类= 移动菜单 >此处文字< /报头><节> ;糖梅松饼饼干糕点燕麦蛋糕糖霜糖果手杖巧克力。 Gummi熊chupa chups水果蛋糕甜点果冻。松饼饼干冰淇淋酥皮点心棒棒糖姜饼甜点。 Unerdwear.com糖果糖杏仁糖糖果gummies巧克力蛋糕gummi熊粉。 Unerdwear.com馅饼halvah巧克力蛋糕糖果甘草。糖梅子巧克力棒糕点甘草糖粉果冻粉。果冻鳕鱼卷应用焦糖。小杏仁饼糖果tootsie卷甜甜圈。 < / section>

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();

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

解决方案

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

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

这篇关于平滑滚动头与固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！