[js]スクロール位置に応じてグローバルナビを点灯させる | begoingtoブログ
1ページで構成されていて、スクロール位置に応じてグローバルナビが点灯するようなサイトを最近よく見かけます。 自分もその仕組みを取り入れたかったので、勉強がてらデモサイトを作りました。 デモサイト 仕組み的には、都度スクロール位置をjsで取得し、点灯するグローバルメニューを判定しています。 1. CSSの調整 CSSに関しては細かい解説はしませんが、ヘッダー固定メニューの場合、下記のようなCSSを記述します。 ただし、position: fixed;は一部のスマホでは未対応のため、幅広くブラウザ対応する場合は別のやり方を考慮する必要があります。 #header { position: fixed; width: 100%; height: 50px; top: 0; text-align: center; background: rgba(180, 180, 180, 0.9); borde
実はストレスだった！スマートフォンでの固定表示がユーザビリティに与える悪影響 | UI改善ブログ by f-tra
スマートフォンサイトの小さく縦に長いページのユーザビリティを向上するために、画面内にナビゲーションやバナー類を固定表示しているサイトは多く存在します。 しかし、コンテンツを固定表示することが、かえって著しくフォームのユーザビリティを低下させる危険性があり、EFOの観点では非常に注意が必要です。 今回はそんなスマートフォンサイトで要素を固定表示することのメリット・デメリットについてまとめてみます。 そもそも、固定表示とは？ ブラウザ画面上の定位置にメニューやコンテンツの一部を表示することです。 固定表示にしたコンテンツは、画面をスクロールしたり、画面サイズを変更しても動くことなく画面の定位置に表示されたままとなります。 メリット 固定表示にしたコンテンツにはページのどの位置にいてもすぐにアクセスすることができます。 例えば、ページ内リンクを固定表示したナビゲーション内に配置しておけば、縦長の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
