web-dev-qa-db-ja.com

固定位置のスムーズスクロールヘッダー

位置を固定に変更したときにスムーズスクロールを作成する方法。アニメーションを追加しようとしましたが、機能しません。 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>
jqueryhtmlcsssmooth-scrolling
5
Palaniichuk Dmytro

@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>
17
Yonas Hailu

コメントに基づいて編集されています。

スクロール中にpositionをfixedに変更すると、望ましくないジャンプ動作が発生します。

あなたの最善の策は、スクロール中の配置を防ぐこと、fixedを40pxの後に、または最初から設定することはほとんど同じであるため、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>
2
Syden

スティッキーヘッダーを実装するシンプルで効果的な方法を探している場合は、ブートストラップを使用することをお勧めします。始めるのは簡単で、すべての重労働はすでにあなたのために行われています。

クイックスタートに従ってください

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

クラス名「navbar-fixed-top」をナビゲーションに追加すれば、それですべてです。そこから、簡単な起動で同様のスティッキーナビゲーションができます。

0
Jack O