具有固定位置的平滑滚动标题

Posted 2023-05-09

【中文标题】具有固定位置的平滑滚动标题

【英文标题】：Smooth scroll header with fixed position

【发布时间】：2017-05-31 10:20:38

【问题描述】：

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

【问题讨论】：

你不能转换位置属性。

如果您正在寻找一种简单有效的方法来实现粘性标题，我建议您使用 Bootstrap。这很容易上手，所有繁重的工作都已经为您完成。按照快速入门v4-alpha.getbootstrap.com/getting-started/introduction/… 将类名“navbar-fixed-top”添加到您的导航中，仅此而已。从那里你有一个简单的启动类似的粘性导航。

【参考方案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 
	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】：

根据评论编辑。

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

最好的办法是防止滚动时定位，在40px 之后设置fixed 或从一开始就几乎相同，所以我建议你在你的jQuery 上删除这部分，并让你的@987654325 @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>

【讨论】：

我无法将页边距添加到部分，因为我有很多不同内容的页面。