monteecristoo’s blog

https://twitter.com/irakaarozo

vue-awesome-swiper でメニューバーをstickyに表示したい

vue-awesome-swiperはflexboxを使っている。

cssに追加

.swiper-wrapper {

  align-item: flex-start;

}

→→ フレックスボックスの上端をそろえる

 

.swiper-container {

  overflow: visible !important;

}

→→ デフォルトでvue-awesome-swiperはoverflow: hiddenになっているので修正

 

.menu {
  position: sticky;

  top: 0;

}

 

参考:

var.blog.jp