あなたも私も
![今日は出社しただけ偉い](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif)
概要 ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。 デモ ダウンロード ※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。 HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。 HTML <header> <h1 id="site-logo">smart</h1> </header> <main id="main"> </main> スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。 あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。 スクロール位置の取得は scrollTop() を使います。 $(window).scrollTop() CSSはHEADE
Posted: 2015.10.28 / Category: javascript / Tag: jQuery ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a hre
映画『クレヨンしんちゃん 爆睡! ユメミーワールド大突撃』感想。 前段として、私は小さい頃からクレヨンしんちゃんの大ファンで、特に映画作品はすべて欠かさず観ているのだが、正直2004年に公開された『クレヨンしんちゃん 嵐を呼ぶ 夕陽のカスカベボーイズ』以降の劇場版はこれまで自分が思っていた「クレヨンしんちゃん像」とはかけ離れたものだった。(これは映画のタイトル冠に『嵐を呼ぶ』がつかなくなったことから制作サイド自身も過去の劇場版と差別化を図っているのがわかる) とは言っても、時代のニーズや、視聴者層が移り変わっている21世紀2017年において「昔のクレヨンしんちゃん」をやるということがどういうことなのか、を理解していないわけではない。だからこそ、妥協点、いや「新旧のクレヨンしんちゃんファン」のどちらもがある程度納得の行く着地点のようなものが必要だった。前ニ作『ガチンコ!逆襲のロボとーちゃん』
66歳男性が風呂場で涙… 友人もいない老後を憂う相談者に鴻上尚史が指摘した、人間関係で絶対に言ってはいけない言葉 作家・演出家の鴻上尚史氏が、あなたのお悩みにおこたえします! 夫婦、家族、職場、学校、恋愛、友人、親戚、社会人サークル、孤独……。皆さまのお悩みをぜひ、ご投稿ください(https://publications.asahi.com/kokami/)。採用された方には、本連載にて鴻上尚史氏が心底真剣に、そしてポジティブにおこたえします(撮影/写真部・小山幸佑) 写真は本文とは関係ありません(※イメージ写真) 鴻上尚史の人生相談。定年退職、嘱託を経て、今年から本格的に隠居生活に入ったという66歳の男性。兄弟からも妻からもつれなくされ、途方にくれる相談者に、鴻上尚史がおくった第二の人生を生きるヒントは「無意識に自分の価値観をおしつけない」こと。 【相談27】隠居後、孤独で、寂しくてたま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く