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

updated: 2018/2/21

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

cssに追加

.swiper-wrapper {

  display: flex !important;

  align-item: flex-start;

}

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

 

.swiper-container {

  overflow: visible !important;

}

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

 

.menu {
  position: sticky;

  top: 0;

}

 

参考:

var.blog.jp

 

related:

monteecristoo.hatenablog.com