備忘録として残しておきます HTML choice.html <select id="parent" onchange="date()" class="form"> <option value="和食">和食</option> <option value="洋食">洋食</option> <option value="中華">中華</option> <option value="" disabled selected>選択してください</option> </select> <select id="children" class="form"> <option value="" disabled selected>選択してください</option> <option value="味噌汁">味噌汁</option> <option value="肉じゃが">肉じゃが</option> <option value="天ぷら">天ぷら</option> <option value="グラタン">グラタン</option> <option value="オムライス">オムライス</option> <option value="ナポリタン">ナポリタン</option> <option value="麻婆豆腐">麻婆豆腐</option> <option value="餃子">餃子</option> <option value="春巻">春巻</option> </select> CSS choice2.css #children option:disabled{ display:none; } #children option{ display:block; } JavaScript choice3.js function date() { //id="course"の値を取得 var parentlement = document.getElementById( "parent" ) ; //id="seminardate"を取得 var childrenDate = document.getElementById( "children") ; //disabledをtrueに for (var i = 0; i < childrenDate.length; i++){ childrenDate.options[i].disabled = true; } // disabledに代入 if( parentlement.value == "和食") { childrenDate.options[1].disabled = false;//味噌汁 childrenDate.options[2].disabled = false;//肉じゃが childrenDate.options[3].disabled = false;//天ぷら } else if( parentlement.value == "洋食") { childrenDate.options[4].disabled = false;//グラタン childrenDate.options[5].disabled = false;//オムライス childrenDate.options[6].disabled = false;//ナポリタン } else if ( parentlement.value == "中華") { childrenDate.options[7].disabled = false;//麻婆豆腐 childrenDate.options[8].disabled = false;//餃子 childrenDate.options[9].disabled = false;//春巻 } else if ( parentlement.value = "") { childrenDate.disabled = true; } } 和食を選択します。 和食を選択すると「味噌汁」「肉じゃが」「天ぷら」以外にdisabledが付きます。 disabledが付いたoptionは非表示になります。 choice2.css #children option:disabled{ display:none; } display:none;がなければこうなります。↓ まとめ このやり方でも一応動きますが、これではメンテナンスがしにくいのでJavaScriptの改善が必要みたいです。 参考リンク https://developer.mozilla.org/ja/docs/Web/CSS/:disabled
備忘録として残しておきます
<select id="parent" onchange="date()" class="form"> <option value="和食">和食</option> <option value="洋食">洋食</option> <option value="中華">中華</option> <option value="" disabled selected>選択してください</option> </select> <select id="children" class="form"> <option value="" disabled selected>選択してください</option> <option value="味噌汁">味噌汁</option> <option value="肉じゃが">肉じゃが</option> <option value="天ぷら">天ぷら</option> <option value="グラタン">グラタン</option> <option value="オムライス">オムライス</option> <option value="ナポリタン">ナポリタン</option> <option value="麻婆豆腐">麻婆豆腐</option> <option value="餃子">餃子</option> <option value="春巻">春巻</option> </select>
#children option:disabled{ display:none; } #children option{ display:block; }
function date() { //id="course"の値を取得 var parentlement = document.getElementById( "parent" ) ; //id="seminardate"を取得 var childrenDate = document.getElementById( "children") ; //disabledをtrueに for (var i = 0; i < childrenDate.length; i++){ childrenDate.options[i].disabled = true; } // disabledに代入 if( parentlement.value == "和食") { childrenDate.options[1].disabled = false;//味噌汁 childrenDate.options[2].disabled = false;//肉じゃが childrenDate.options[3].disabled = false;//天ぷら } else if( parentlement.value == "洋食") { childrenDate.options[4].disabled = false;//グラタン childrenDate.options[5].disabled = false;//オムライス childrenDate.options[6].disabled = false;//ナポリタン } else if ( parentlement.value == "中華") { childrenDate.options[7].disabled = false;//麻婆豆腐 childrenDate.options[8].disabled = false;//餃子 childrenDate.options[9].disabled = false;//春巻 } else if ( parentlement.value = "") { childrenDate.disabled = true; } }
和食を選択します。 和食を選択すると「味噌汁」「肉じゃが」「天ぷら」以外にdisabledが付きます。
disabledが付いたoptionは非表示になります。
#children option:disabled{ display:none; }
display:none;がなければこうなります。↓
このやり方でも一応動きますが、これではメンテナンスがしにくいのでJavaScriptの改善が必要みたいです。
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled
学んだことまとめ プロゲート HTML＆CSS道場コース中級編２周目を終えました。 自力でやりました！ ２回目は１回目の半分以下の時間で終えることができました。 つい見過ごしがちなこと ・要素を中央に寄せるにはmargin:autoを使う ・position absoluteには％が指定できる ・widthや中央揃えは親要素にきいてくる ・２つのクラスをCSS設定するときは、.top .btnのように「.」で続けて記す ・2つのタグをCSS設定するときは、footer imgのように半角スペースを空けて続けて記す ・:hoverの前に半角スペースはいらない ・画像アイコンと文字を重ねるときのクラス設定は同じにする
プロゲート HTML＆CSS道場コース中級編２周目を終えました。 自力でやりました！ ２回目は１回目の半分以下の時間で終えることができました。
・要素を中央に寄せるにはmargin:autoを使う ・position absoluteには％が指定できる ・widthや中央揃えは親要素にきいてくる ・２つのクラスをCSS設定するときは、.top .btnのように「.」で続けて記す ・2つのタグをCSS設定するときは、footer imgのように半角スペースを空けて続けて記す ・:hoverの前に半角スペースはいらない ・画像アイコンと文字を重ねるときのクラス設定は同じにする
【CSS】グラデーションを使った感触を記録（基本と線形） 【CSS】グラデーションを使った感触を記録2（放射と扇形） 【CSS】グラデーションを使った感触を記録3（反復と合成） 反復（repeating-） repeating-を先頭に付けるとグラデーションを反復します。 種類 関数 反復 線形 linear-gradient repeating-linear-gradient 放射 radial-gradient repeating-radial-gradient 扇形 conic-gradient repeating-conic-gradient 色経由点の配置 これまでグラデーションの終点はボックスの端（100％）に設定されていました。 しかし、それでは反復させても（放射以外では）意味がないのでグラデーションのサイズ（終点）を自由に決めることができるようになります。 これにより、始点と終点の使い勝手が変わります。 終点の設定 ボックスの端（100％）以外にしたい時は、最後に値を設定します。 repeat-linear-gradient(90deg,red,blue,green 50%); repeat-linear-gradient(90deg,red,blue,green 100px); repeat-radial-gradient(90deg,red,blue,green 40% 50%); repeat-radial-gradient(90deg,red,blue,green 80px 100px); repeat-conic-gradient(90deg,red,blue,green 50%); repeat-conic-gradient(90deg,red,blue,green 45deg); 始点の設定 始点色に色経由点を設定する時は、これまでと違い0を挿入します。 repeat-linear-gradient(90deg,red,blue,green 100px); repeat-linear-gradient(90deg,red 0 30px,blue,green 100px); 以下のような書き方も見受けられます。 repeat-linear-gradient(90deg,red,red 30px,blue,green 100px); 色経由点の％設定 グラデーション幅に対しての割合ではなく、ボックス端に対しての割合なので注意 使用例 .box1 { background: repeating-linear-gradient( 90deg,red,blue,green ); } .box2 { background: repeating-linear-gradient( 90deg,red,blue,green 50% ); } .box3 { background: repeating-linear-gradient( 90deg,red,blue,green 100px ); } .box4 { background: repeating-linear-gradient( 90deg,red 0 15%,blue,green 100px ); } 合成 複数のグラデーションを重ね合わせることで、様々な表現が可能となります。 この場合、transparentや透過色rgba()を主に使用します。 重ね方は下記のように,でグラデーションを連結させることが出来ます。 .box { background: repeating-linear-gradient( transparent 0 15px,red 15px 30px ), repeating-radial-gradient( transparent 0 15px,blue 15px 30px ), repeating-conic-gradient( transparent 0 15deg,green 15deg 30deg ); } 上記コードで画像のようになります 重ね順は、最初に書いたものが一番上となり、下へ追加していきます。 画像にしてみましたが伝わるかな。 ここでは詳しく触れませんが、最後に画像を追加することでエフェクトを加えたように見せる事もできるみたいです。 終わりです お付き合いありがとうございました。 参考サイト CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
【CSS】グラデーションを使った感触を記録（基本と線形） 【CSS】グラデーションを使った感触を記録2（放射と扇形） 【CSS】グラデーションを使った感触を記録3（反復と合成）
repeating-を先頭に付けるとグラデーションを反復します。
repeating-
これまでグラデーションの終点はボックスの端（100％）に設定されていました。 しかし、それでは反復させても（放射以外では）意味がないのでグラデーションのサイズ（終点）を自由に決めることができるようになります。
これにより、始点と終点の使い勝手が変わります。
ボックスの端（100％）以外にしたい時は、最後に値を設定します。
repeat-linear-gradient(90deg,red,blue,green 50%); repeat-linear-gradient(90deg,red,blue,green 100px); repeat-radial-gradient(90deg,red,blue,green 40% 50%); repeat-radial-gradient(90deg,red,blue,green 80px 100px); repeat-conic-gradient(90deg,red,blue,green 50%); repeat-conic-gradient(90deg,red,blue,green 45deg);
始点色に色経由点を設定する時は、これまでと違い0を挿入します。
0
repeat-linear-gradient(90deg,red,blue,green 100px); repeat-linear-gradient(90deg,red 0 30px,blue,green 100px);
以下のような書き方も見受けられます。
repeat-linear-gradient(90deg,red,red 30px,blue,green 100px);
グラデーション幅に対しての割合ではなく、ボックス端に対しての割合なので注意
.box1 { background: repeating-linear-gradient( 90deg,red,blue,green ); } .box2 { background: repeating-linear-gradient( 90deg,red,blue,green 50% ); } .box3 { background: repeating-linear-gradient( 90deg,red,blue,green 100px ); } .box4 { background: repeating-linear-gradient( 90deg,red 0 15%,blue,green 100px ); }
複数のグラデーションを重ね合わせることで、様々な表現が可能となります。 この場合、transparentや透過色rgba()を主に使用します。
transparent
rgba()
重ね方は下記のように,でグラデーションを連結させることが出来ます。
,
.box { background: repeating-linear-gradient( transparent 0 15px,red 15px 30px ), repeating-radial-gradient( transparent 0 15px,blue 15px 30px ), repeating-conic-gradient( transparent 0 15deg,green 15deg 30deg ); }
上記コードで画像のようになります
重ね順は、最初に書いたものが一番上となり、下へ追加していきます。
画像にしてみましたが伝わるかな。
ここでは詳しく触れませんが、最後に画像を追加することでエフェクトを加えたように見せる事もできるみたいです。
お付き合いありがとうございました。
CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
前提・実現したいこと 5ヶ月勉強したが、良い企業に廻り会える気がしない 未経験からエンジニアに転職したい 発生している問題 ・自社開発系 ・受託開発系 ・SES,Sler この3つの違いがよくわからない 未経験を受け入れてくれるのだろうか心配 自社開発系 メリット ・新しい言語を取り入れてサービスを開発する企業がある ・スーツを着なくて良い ・スタートアップ、給与があるが可能性がある デメリット ・スタートアップ、解雇や倒産のリスクがある ・サービスが出来上がった会社だと古い言語を使っている場合もある ・納期前は深夜勤務があるかも 受託開発系 メリット ・言語が新しいものと古いもの両方試せる可能性がある ・いろんな自社開発系企業の受託をやりながら自社開発を行っている企業もある デメリット ・自社に比べて給与が低い可能性がある SES,Sler メリット ・未経験でも採用されやすい ・いろんな自社開発系企業で働ける デメリット ・希望の案件を受けることが出来ず、プログラミングとは違う案件をやらないいけない企業がある ・下請けすぎると給与がなかなか上がらない企業がある コロナ渦で自社企業に未経験者が受かる可能性1%と聞き焦ったので、 調べてみました。 この状況だと受託にいければラッキー 試したこと Youtubeで調べた 順番:kentaさん、せいやさん、とだこうきさん（東京フリーランス） 補足情報（FW/ツールのバージョンなど） 仮でまとめてみたので、 またわかったことや追記して行きます。
5ヶ月勉強したが、良い企業に廻り会える気がしない 未経験からエンジニアに転職したい
・自社開発系 ・受託開発系 ・SES,Sler
この3つの違いがよくわからない 未経験を受け入れてくれるのだろうか心配
メリット ・新しい言語を取り入れてサービスを開発する企業がある ・スーツを着なくて良い ・スタートアップ、給与があるが可能性がある
デメリット ・スタートアップ、解雇や倒産のリスクがある ・サービスが出来上がった会社だと古い言語を使っている場合もある ・納期前は深夜勤務があるかも
メリット ・言語が新しいものと古いもの両方試せる可能性がある ・いろんな自社開発系企業の受託をやりながら自社開発を行っている企業もある
デメリット ・自社に比べて給与が低い可能性がある
メリット ・未経験でも採用されやすい ・いろんな自社開発系企業で働ける
デメリット ・希望の案件を受けることが出来ず、プログラミングとは違う案件をやらないいけない企業がある ・下請けすぎると給与がなかなか上がらない企業がある
コロナ渦で自社企業に未経験者が受かる可能性1%と聞き焦ったので、 調べてみました。
この状況だと受託にいければラッキー
Youtubeで調べた 順番:kentaさん、せいやさん、とだこうきさん（東京フリーランス）
仮でまとめてみたので、 またわかったことや追記して行きます。
WordPressで記事を書くときに、引用元が本文と同じく左寄せで見づらかったので、右寄せにしました。 あと引用元の文字を少し小さくしました。 Before After 前提 テーマ:JIN 引用元を右寄せにするCSS /* 引用元 */ .wp-block-quote > cite { font-size: .8em; display: inline-block; text-align: right; width: 100%; } ブログ ブログやってます。プログラミングについては書いてないけど。 思い考える日常
WordPressで記事を書くときに、引用元が本文と同じく左寄せで見づらかったので、右寄せにしました。 あと引用元の文字を少し小さくしました。
Before After
テーマ:JIN
/* 引用元 */ .wp-block-quote > cite { font-size: .8em; display: inline-block; text-align: right; width: 100%; }
ブログやってます。プログラミングについては書いてないけど。 思い考える日常
Vue.jsとCSSを用いてスライドショーを実装するメモです。 目的 上記のようなシンプルなスライドショーを実装します。 実装 テンプレート Imageslide.vue <template> <div> <transition-group tag="ul" class="images"> <li v-for="(image, index) in demoimages" v-show="currentImage == index + 1" :key="index" > <img :src="image.image" alt="" /> </li> </transition-group> </div> </template> 画像をv-forでリストしてv-showで表示を切り替えています。 v-showはv-ifとは違い、DOMを消したり追加したりはせず、display:noneを付与して要素を非表示にします。そのため非表示の画像をもう一度表示する場合も、再度画像が読み込まれるわけではありません。 スクリプト Imageslide.vue <script> export default { data() { return { currentImage: 1, } }, computed: { demoimages() { return [ { image: '/images/1.jpg' }, { image: '/images/2.jpg' }, { image: '/images/3.jpg' }, ] }, }, watch: { currentImage() { this.autoSlide() }, }, mounted() { this.autoSlide() }, methods: { async autoSlide() { const wait = (ms) => new Promise((resolve) => setTimeout(() => resolve(), ms)) await wait(2000) if (this.currentImage > this.images.length - 1) { this.currentImage = 1 } else { this.currentImage++ } }, }, } </script> 表示されている画像のインデックスを示すcurrentImageをウォッチしてautoSlide()を実行しています。currentImageが画像のリストを超えた場合に初期化することで無限ループになります。 スタイル Imageslide.vue <style lang="scss" scoped> .images { width: 100%; height: 100%; padding: 0; margin: 0; position: relative; li { width: 100%; height: 100%; max-height: 627px; position: absolute; top: 0; left: 0; } } img { width: 100%; height: 100%; max-height: 627px; margin: auto; z-index: 2; } .v-enter-active, .v-leave-active { transition: opacity 0.5s; } .v-enter, .v-leave-to { opacity: 0; } </style> リストの親要素にposition:relativeを指定し、子要素にposition:absolute top:0 left:0を指定することで同じ位置に画像を重ねることができます。 .v-enter-active,.v-leave-active,.v-enter,.v-leave-toはtransitionによってVueから自動的に付与されるクラスです。 まとめ Vue.jsとCSSを使用したスライドショーの実装方法について簡単に説明してみました。私はこのように実装しましたが、おそらく別の方法もあるかと思います。いろいろ試してみてください！
Vue.jsとCSSを用いてスライドショーを実装するメモです。
Vue.js
CSS
上記のようなシンプルなスライドショーを実装します。
<template> <div> <transition-group tag="ul" class="images"> <li v-for="(image, index) in demoimages" v-show="currentImage == index + 1" :key="index" > <img :src="image.image" alt="" /> </li> </transition-group> </div> </template>
画像をv-forでリストしてv-showで表示を切り替えています。 v-showはv-ifとは違い、DOMを消したり追加したりはせず、display:noneを付与して要素を非表示にします。そのため非表示の画像をもう一度表示する場合も、再度画像が読み込まれるわけではありません。
v-for
v-show
v-if
display:none
<script> export default { data() { return { currentImage: 1, } }, computed: { demoimages() { return [ { image: '/images/1.jpg' }, { image: '/images/2.jpg' }, { image: '/images/3.jpg' }, ] }, }, watch: { currentImage() { this.autoSlide() }, }, mounted() { this.autoSlide() }, methods: { async autoSlide() { const wait = (ms) => new Promise((resolve) => setTimeout(() => resolve(), ms)) await wait(2000) if (this.currentImage > this.images.length - 1) { this.currentImage = 1 } else { this.currentImage++ } }, }, } </script>
表示されている画像のインデックスを示すcurrentImageをウォッチしてautoSlide()を実行しています。currentImageが画像のリストを超えた場合に初期化することで無限ループになります。
currentImage
autoSlide()
<style lang="scss" scoped> .images { width: 100%; height: 100%; padding: 0; margin: 0; position: relative; li { width: 100%; height: 100%; max-height: 627px; position: absolute; top: 0; left: 0; } } img { width: 100%; height: 100%; max-height: 627px; margin: auto; z-index: 2; } .v-enter-active, .v-leave-active { transition: opacity 0.5s; } .v-enter, .v-leave-to { opacity: 0; } </style>
リストの親要素にposition:relativeを指定し、子要素にposition:absolute top:0 left:0を指定することで同じ位置に画像を重ねることができます。 .v-enter-active,.v-leave-active,.v-enter,.v-leave-toはtransitionによってVueから自動的に付与されるクラスです。
position:relative
position:absolute top:0 left:0
.v-enter-active,.v-leave-active,.v-enter,.v-leave-to
transition
Vue.jsとCSSを使用したスライドショーの実装方法について簡単に説明してみました。私はこのように実装しましたが、おそらく別の方法もあるかと思います。いろいろ試してみてください！
上スクロールでふわっと降りてきて、下スクロールで消えるトップメニュー を作ってみました。 See the Pen Topmenu that appear-scrollup & hide-scrolldown by sarap422 (@sarap422) on CodePen. よくあるやり方と若干違うのは、 最初から position: fixed; でなく、 スクロール量に応じて、途中から position: fixed; にしています。 つまり、どういうことかと言いますと、 スマホのときに、最初のトップメニューはそのまま使いたい、 途中から、上スクロールで下タブ表示されるようにしたい、 という動きになります。 あと最初が position: static;（初期値） のままだから、 レイアウト調整が楽とかもあるかもしれないですね。 解説部分 scroll量計算・グローバル変数 javascript $(function () { // グローバル変数 previous_scrY = 0; // window 'scroll' があったとき $(window).on("scroll", function () { // scroll量計算 let current_scrY = window.pageYOffset; let diff_scrY = current_scrY - previous_scrY; current_scrY（現在スクロール量） - previous_scrY（前回スクロール量） で、上スクロールか下スクロールかと判定します。 「var」や「let」だと上手く行かなかったのですが、「グローバル変数」というのがあるらしいですね。これだと上手くいきました。 「position:fixed」に変更、「.hide」クラスで一旦隠す javascript // 現scrollY > 150 (※「pos:fixed」に変更、「.hide」で一旦隠す) if (current_scrY > 150) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' に、class'rolldown-hide'を追加 $("#Meltlilith").removeClass("rollup-PC rollup-Mbl"); $("#Meltlilith").addClass("rolldown-hide-PC rolldown-hide-Mbl"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' に、class'rollup-hide'を追加 $("#Meltlilith").removeClass("rolldown-PC rolldown-Mbl"); $("#Meltlilith").addClass("rollup-hide-PC rollup-hide-Mbl"); } css @media only screen and (max-width: 500px) { .rollup-Mbl .toplogo, .rollup-Mbl .toplogo { display: none; } .rolldown-Mbl, .rolldown-hide-Mbl { position: fixed; z-index: 999; width: 100%; justify-content: center; bottom: -100%; } 途中で、position: fixed; に変更する場合 cssの transition でふわっとならずに、すぐにドンと表示されたんですね。 それとスマホのときの、「最初は上表示 → 途中は下から表示」も上手く行かなかったので、一旦隠す処理を入れました。 隠していた「fixed」メニューを表示 javascript // 現scrollY > 200 if (current_scrY > 200) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' を、class'rolldown-hide' → 'rolldown'に移行 $("#Meltlilith").removeClass("rolldown-hide-PC rolldown-hide-Mbl"); $("#Meltlilith").addClass("rolldown-PC rolldown-Mbl"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' を、class'rollup-hide' → 'rollup'に移行 $("#Meltlilith").removeClass("rollup-hide-PC rollup-hide-Mbl"); $("#Meltlilith").addClass("rollup-PC rollup-Mbl"); } } /*ƒ /if (current_scrY > 200) */ css .rollup-Mbl { position: fixed; z-index: 999; width: 100%; justify-content: center; bottom: 0; } あとは「.roll-hide」クラスを削除して、「.roll」で表示というだいたい同じような作りですね。 最後に「現在のスクロール量」を次回スクロール時の比較値として記録 javascript } else { /* not(current_scrY > 150) */ // "roll"classを全削除 $("#Meltlilith").removeClass( "rolldown-hide-PC rollup-PC rolldown-hide-PC rolldown-PC rolldown-hide-Mbl rollup-Mbl rolldown-hide-Mbl rolldown-Mbl" ); } // 処理後に、現scrollYを、前scrollYとして記録 previous_scrY = current_scrY; 上に来たときは、 position: static;（初期値） に戻るよう「.roll」クラスを全削除、 処理が終わった最後に、現在のスクロール量を、次回比較値として記録します。 下タブ時はアイコンも表示されるようにしてみる css .rollup-Mbl [id^='Top__li'] i:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; font-size: 1.5rem; /* content内での改行ありにする */ white-space: pre; } .rollup-Mbl #Top__li-Home i:before { content: '\f015\a'; } .rollup-Mbl #Top__li-Works i:before { content: '\f0b1\a'; } .rollup-Mbl #Top__li-About i:before { content: '\f007\a'; } 疑似要素で、下タブ時はアイコンも表示されるようにもしてみました。 white-space: pre;、content: '\a'; でアイコン改行です。 まとめ ちなみにふわっと降りてくるだけなら、もう少しシンプルに。 既存のトップメニューのままでも、id付け加えるだけでもある程度は動くんじゃないでしょうか？ 以上です。 css /* scrollPeraFix-falling.js （上スクロールでTopbar表示、下スクロールで消去） =================================================================== */ #Meltlilith { width: 100%; transition: all 0.3s ease-in-out; } .rolldown, .rollup-hide { position: fixed; z-index: 999; width: 100%; top: 0; } .rollup { position: fixed; z-index: 999; width: 100%; top: -100%; } javascript /* scrollPeraFix-falling.js （上スクロールでTopbar表示、下スクロールで消去） =================================================================== */ $(function () { // グローバル変数 previous_scrY = 0; // window 'scroll' があったとき $(window).on("scroll", function () { // scroll量計算 let current_scrY = window.pageYOffset; let diff_scrY = current_scrY - previous_scrY; // 現scrollY > 150 (※「pos:fixed」に変更、「.hide」で一旦隠す) if (current_scrY > 150) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' に、class'rolldown-hide'を追加 $("#Meltlilith").removeClass("rollup"); $("#Meltlilith").addClass("rolldown-hide"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' に、class'rollup-hide'を追加 $("#Meltlilith").removeClass("rolldown"); $("#Meltlilith").addClass("rollup-hide"); } // 現scrollY > 200 if (current_scrY > 200) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' を、class'rolldown-hide' → 'rolldown'に移行 $("#Meltlilith").removeClass("rolldown-hide"); $("#Meltlilith").addClass("rolldown"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' を、class'rollup-hide' → 'rollup'に移行 $("#Meltlilith").removeClass("rollup-hide"); $("#Meltlilith").addClass("rollup"); } } /*ƒ /if (current_scrY > 200) */ } else { /* not(current_scrY > 150) */ // "roll"classを全削除 $("#Meltlilith").removeClass( "rollup-hide rollup rolldown-hide rolldown" ); } // 処理後に、現scrollYを、前scrollYとして記録 previous_scrY = current_scrY; }); });
を作ってみました。
See the Pen Topmenu that appear-scrollup & hide-scrolldown by sarap422 (@sarap422) on CodePen.
よくあるやり方と若干違うのは、 最初から position: fixed; でなく、 スクロール量に応じて、途中から position: fixed; にしています。
position: fixed;
つまり、どういうことかと言いますと、 スマホのときに、最初のトップメニューはそのまま使いたい、 途中から、上スクロールで下タブ表示されるようにしたい、 という動きになります。
あと最初が position: static;（初期値） のままだから、 レイアウト調整が楽とかもあるかもしれないですね。
position: static;（初期値）
$(function () { // グローバル変数 previous_scrY = 0; // window 'scroll' があったとき $(window).on("scroll", function () { // scroll量計算 let current_scrY = window.pageYOffset; let diff_scrY = current_scrY - previous_scrY;
current_scrY（現在スクロール量） - previous_scrY（前回スクロール量） で、上スクロールか下スクロールかと判定します。 「var」や「let」だと上手く行かなかったのですが、「グローバル変数」というのがあるらしいですね。これだと上手くいきました。
current_scrY（現在スクロール量） - previous_scrY（前回スクロール量）
// 現scrollY > 150 (※「pos:fixed」に変更、「.hide」で一旦隠す) if (current_scrY > 150) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' に、class'rolldown-hide'を追加 $("#Meltlilith").removeClass("rollup-PC rollup-Mbl"); $("#Meltlilith").addClass("rolldown-hide-PC rolldown-hide-Mbl"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' に、class'rollup-hide'を追加 $("#Meltlilith").removeClass("rolldown-PC rolldown-Mbl"); $("#Meltlilith").addClass("rollup-hide-PC rollup-hide-Mbl"); }
@media only screen and (max-width: 500px) { .rollup-Mbl .toplogo, .rollup-Mbl .toplogo { display: none; } .rolldown-Mbl, .rolldown-hide-Mbl { position: fixed; z-index: 999; width: 100%; justify-content: center; bottom: -100%; }
途中で、position: fixed; に変更する場合 cssの transition でふわっとならずに、すぐにドンと表示されたんですね。
それとスマホのときの、「最初は上表示 → 途中は下から表示」も上手く行かなかったので、一旦隠す処理を入れました。
// 現scrollY > 200 if (current_scrY > 200) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' を、class'rolldown-hide' → 'rolldown'に移行 $("#Meltlilith").removeClass("rolldown-hide-PC rolldown-hide-Mbl"); $("#Meltlilith").addClass("rolldown-PC rolldown-Mbl"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' を、class'rollup-hide' → 'rollup'に移行 $("#Meltlilith").removeClass("rollup-hide-PC rollup-hide-Mbl"); $("#Meltlilith").addClass("rollup-PC rollup-Mbl"); } } /*ƒ /if (current_scrY > 200) */
.rollup-Mbl { position: fixed; z-index: 999; width: 100%; justify-content: center; bottom: 0; }
あとは「.roll-hide」クラスを削除して、「.roll」で表示というだいたい同じような作りですね。
} else { /* not(current_scrY > 150) */ // "roll"classを全削除 $("#Meltlilith").removeClass( "rolldown-hide-PC rollup-PC rolldown-hide-PC rolldown-PC rolldown-hide-Mbl rollup-Mbl rolldown-hide-Mbl rolldown-Mbl" ); } // 処理後に、現scrollYを、前scrollYとして記録 previous_scrY = current_scrY;
上に来たときは、 position: static;（初期値） に戻るよう「.roll」クラスを全削除、 処理が終わった最後に、現在のスクロール量を、次回比較値として記録します。
.rollup-Mbl [id^='Top__li'] i:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; font-size: 1.5rem; /* content内での改行ありにする */ white-space: pre; } .rollup-Mbl #Top__li-Home i:before { content: '\f015\a'; } .rollup-Mbl #Top__li-Works i:before { content: '\f0b1\a'; } .rollup-Mbl #Top__li-About i:before { content: '\f007\a'; }
疑似要素で、下タブ時はアイコンも表示されるようにもしてみました。 white-space: pre;、content: '\a'; でアイコン改行です。
white-space: pre;
content: '\a';
ちなみにふわっと降りてくるだけなら、もう少しシンプルに。 既存のトップメニューのままでも、id付け加えるだけでもある程度は動くんじゃないでしょうか？ 以上です。
/* scrollPeraFix-falling.js （上スクロールでTopbar表示、下スクロールで消去） =================================================================== */ #Meltlilith { width: 100%; transition: all 0.3s ease-in-out; } .rolldown, .rollup-hide { position: fixed; z-index: 999; width: 100%; top: 0; } .rollup { position: fixed; z-index: 999; width: 100%; top: -100%; }
/* scrollPeraFix-falling.js （上スクロールでTopbar表示、下スクロールで消去） =================================================================== */ $(function () { // グローバル変数 previous_scrY = 0; // window 'scroll' があったとき $(window).on("scroll", function () { // scroll量計算 let current_scrY = window.pageYOffset; let diff_scrY = current_scrY - previous_scrY; // 現scrollY > 150 (※「pos:fixed」に変更、「.hide」で一旦隠す) if (current_scrY > 150) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' に、class'rolldown-hide'を追加 $("#Meltlilith").removeClass("rollup"); $("#Meltlilith").addClass("rolldown-hide"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' に、class'rollup-hide'を追加 $("#Meltlilith").removeClass("rolldown"); $("#Meltlilith").addClass("rollup-hide"); } // 現scrollY > 200 if (current_scrY > 200) { // 現scrollYが、前scrollYより大きい場合 if (diff_scrY > 0) { // id '#' を、class'rolldown-hide' → 'rolldown'に移行 $("#Meltlilith").removeClass("rolldown-hide"); $("#Meltlilith").addClass("rolldown"); } // 現scrollYが、前scrollYより小さい場合 if (diff_scrY < 0) { // id '#' を、class'rollup-hide' → 'rollup'に移行 $("#Meltlilith").removeClass("rollup-hide"); $("#Meltlilith").addClass("rollup"); } } /*ƒ /if (current_scrY > 200) */ } else { /* not(current_scrY > 150) */ // "roll"classを全削除 $("#Meltlilith").removeClass( "rollup-hide rollup rolldown-hide rolldown" ); } // 処理後に、現scrollYを、前scrollYとして記録 previous_scrY = current_scrY; }); });
