CSS position: sticky;

CSS position stickyについて

 

他のカラム等を加味しながら要素を固定したい

e.g) サイドバーと別カラムでトップメニューを固定表示したい

→ sticky

 

他の要素を加味しない

→ fixed

 

stickyを使うときはtop, left, right等の場所を指定するプロパティーと一緒に使うこと

fixedと入れ子で指定できない(要検証)

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

Windowsコマンドプロンプトから空のファイルを作成

type nul > test.html

 

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

metismenu ・・・ class metismenuが複数あると2つ目がエラー???

  • 大画面ではサイドに固定されたmetismenuが使いたい
  • モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい

2種類のサイドバーを用意して画面サイズごとに切り替えたい

→→ 

display: none で表示を調整してもDOMが残っているとエラーが出るのでDOMごと消して切り替える

solution: v-if (DOMごと消える) ** v-showはDOMが残る

________________________________________________

<div class="large-sidenavbar">
  <div v-if=" isLarge === true ">
    <sidenavbar></sidenavbar> ・・・metismenu①
  </div>
</div>

_________________________________________________

<swiper :options="swiperOption" ref="swiper">
  <swiper-slide class="menu">
    <sidenavbar></sidenavbar>・・・metismenu②
  </swiper-slide>
  <swiper-slide class="content"></swiper-slide>

</swiper>

____________________________________________________

<script>

computed: {
  isLarge() {
    if(window.matchMedia('(min-width: 1024px)').matches)
    {
      return true;
    } else
    {
      return false;
    }
  }
}

</script>

 

<style>

  @media (min-width: 1024px) {
    .menu, .menu-button {
      display: none;
    }
  }

</style>

2つ目はdisplay: noneで処理しても1つ目でエラーが出ない

 

DOMの消去とdisplay:none

DOMの消去はtoggleした時のコストが大きい、display:noneはtoggleコストは小さいがページロード時のイニシャルコストが大きい。そのため一長一短。

 

javascriptで画面サイズを取得

参考:

dev.mozilla.jp

qiita.com

Laravel blade template でVueを使うときの注意 稀なエラー

blade templateで@section('hoge')を設定したのち、

vue側のapp.jsでvueをinjectするタグを以下のように同じ<hoge>に設定すると…

Vue.component('hoge', require('./componets/Hoge.vue'));

 

エラー(コンソールにもコンパイル時もエラーが表示されない)でvueが表示されない。

Vue.component('foo', require('./componets/Hoge.vue'));

vue側のタグを変えると正常動作する。

PeachScript/vue-infinite-loading each element CSS management

github.com

infinite-loadingの各elementをイベントを通じてcssを管理

  1. ロードされるlist内にcss管理用のvariableを設置する
  2. listのelementに無効なクラスを設定しておいて(defaultでは無効でクラス無し扱い)、イベントでクラスを有効化する

 

 

noraesae/perfect-scrollbar でbarが表示されない件

/perfect-scrollbar

#containerのwidthやheightが中に入れたコンテンツのwidthやheighより大きいため。

demoでHeightを中の画像より大きい800pxにするとy-railが消える