タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
スマホ版はてなブログの『ヘッダーの読者になるボタン』と『スクロール追従ブックマークボタン』を非表示させる方法を紹介しますの！ - 元IT土方の供述
みんなー！うしるだよー☆ スマホ版はてなブログの『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』を非表示させる方法を紹介するんだ！ 刮目して見てね♡ 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ヘッダーの読者になるボタンを非表示にする方法 追従ブックマークボタンを非表示にする方法 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ある日突然、「読者になるボタン」がブログタイトルとブログアイコンと共にヘッダーに表示されました。 2021年7月13日のはてなブログの仕様変更で追加されたようです。 そして、記事ページのヘッダーには記事タイトルが書かれた「ブックマークボタン」が表示され、スクロールするとストーカーの如く追従するようになりました。 こちらは2021年5月17日の仕様変
スクロール追従するページ内ナビゲーション
Result 少しのVanillaなJSで作るページ内スクロールと追従するナビゲーション。よくドキュメントページとかナレッジ共有系のWebサイトで見かけますね。 今更感なネタですが、ボーっとCodePenの2020年ベストPenみたいな記事を眺めてたら見かけたので割と需要あるネタですしメモ的にと思って書いてます。 javascriptwindow.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute('id'); if (entry.intersectionRatio > 0) { document.querySelec
サイドバーを固定・スクロール追従させる2つの方法
サイドバーで目次や広告を、固定・スクロール追従させているサイトが多いですよね。このサイトでも、スクロールした際に目次が固定されるようになっています。 今回はサイドバーの固定を、CSSだけで実装する方法と、Javscriptを用いる方法の二つをご紹介します。 CSSだけで実装する方法はシンプルですが、サイドバーの横並びをfloatによって実現していると効かないことがあります。 Javascrptを用いる方法は少し面倒ですが、細かい調整が効くので覚える価値はあります。例えば、次の記事で紹介しているように、サイドバーを固定する範囲をより自由に決められます。 好きな範囲でのみサイドバーを固定・スクロール追従させる方法好きな範囲でサイドバーを固定・スクロール追従させる方法について説明します。CSSだけではできませんが、ライブラリを用いずとも比較的簡単なJavascriptで実現できます。... それ
今回は、CSSだけでサイドバーを固定する方法を紹介します。 コンテンツをスクロールすると、サイドバーの一部が途中から追従する動きは、ブログなど2カラムのサイトではよく使われています。 頻繁に使われるので、実装方法を覚えてきましょう。 サイドバーの下部にあるエリアが、スクロールに追従するようになります。 昔はJavaScriptを駆使して実装していましたが、今ではCSSだけでできるようになりました。 HTML bodyやヘッダー、フッターのHTMLは省略します。 <div class="wrapper"> <main class="main"></main> <aside class="sidebar"> <div class="widget"></div> <div class="widget widget--sticky"></div> </aside> </div> 以下のCSSで、.
実装方法 まずはHTML。 <div class="container"> <main class="main"> <!-- メインコンテンツ --> </main> <div class="sidebar"> <div class="sidebar__item"> <!-- 中身 --> </div> <div class="sidebar__item sidebar__item--fixed"> <!-- 固定・追従させたいエリア --> </div> </div> </div> お次は、CSS。 .container { width: 1000px; display: -webkit-flex; display: flex; } .main { display: block; width: 660px; margin-right: 20px; } .sidebar { width:
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでサイドバーを固定（スクロール追従）する方法
CSSだけでサイドバーを固定・スクロール追従する方法（JavaScript不要）
hanatara.hatenablog.com
gendai.media
yuyakekoyakeakatombo.hatenablog.com
umechan3150.hatenablog.com
kokomi.ag.ebb.jp
encount.press