最近小ネタで攻める姿勢を微塵も崩そうともしない僕ですが、みなさん元気です?今回は案件で対応した点で、ちょっとおもしろげな対応をしたので誰かの役に立つかなぁと思ったので書いてみます。今回やったことを応用すれば最近よく見る、スクロールしていくとサイドバーの広告が固定配置になるような手法も出来るようになります。(あれってガイドラインに沿ってないって聞いたことが歩きがするんですけどどうなんでしょうね)やりたかったことTwitterBootstrapのページ上部に固定で表示させているグローバルナビの下にメインビジュアルを置きたいわけです。そのメインビジュアルは透過pngで作られており、上に何か要素が飛び出している感じにしたいんです。スクロールした時によろしくないこれ自体の実装は特に問題ないです。した場合、画面を下にスクロールすると当然メインビジュアルがグローバルナビより上に来ますよね。これはちょとかっこ悪い非常に残念ですね。ページの一番上の時とちょっとでもスクロールしたときでcssを変更するてことは、今の画面の表示箇所がページの一番上だった場合にのみz-indexをグローバルナビより上にして、一番上以外の時には下にすれば良い訳ですねさて、それをどうするかですが、今回はjQueryで実装してみようと思います。スクロールを監視するまずはユーザーのスクロール動作を監視します。次に、ページが一番上か否かの条件分岐を書きます。「セレクタ.scrollTop()」を使うと、セレクタの元々の位置からどれだけスクロールしたかが取得できます。});});</script>完成!これで完成です。やったね!おわりに本当は上で書いたようにある程度スクロールすると固定配置になる方法を書きたかったんですが思いの外時間がかかったので、それはまたいつ書くかもです。やってJSを使うと、cssだけでは絶対に出来ないと思っていたことが簡単に出来てしまうことがあって便利ですね。僕は今までは昔の名残(Gmail以前はJSって嫌われてましたよね)があったことと、イマイチよく分からない言語だなぁという印象だったことで今まで関わってこなかったんですが、今では必須みたいな言語になってますし、実際に使わない理由はない言語になっていると感じます。僕も学び初めなのですが、すでに、どういったことが出来るのか、どう書けばより高速か、どういうツールを使うと効率的か、どういったライブラリを使えば良いか、など、知れば知るほどに深い言語だなぁという認識に変わりました。僕的にはとっつきにくい言語だなぁ、という印象はあったので、もし僕以外にも、JSを敬遠しているWeb制作者(主にフロントの方)がいるなら、まずはjQueryから始めて、徐々にJS自体を知っていく、みたいな流れで憶えてみては如何でしょうか。@anticyborgさんからReplyトラックバック/ピンバックはありません。音楽系copyright@STACKSTOCK。