読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

fixedの要素も横方向にはスクロールして欲しいという想い

マークアップをしていると、「縦方向にはfixedにしたいけど、横方向にはfixedしたくない」と思う瞬間がやってくると思います。
そんな時はJavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定するだけで実装できます。

HTML
<div id="header"></div>
CSS
body {
  min-width: 980px;
}

#header {
  position: fixed;
  min-width: 980px;
  width: 100%;
  height: 64px;
  z-index: 10;
}
JavaScript
var header = document.getElementById("header");

window.addEventListener('scroll', _handleScroll, false);

function _handleScroll() {
  header.style.left = -window.scrollX + "px";
}

DEMO 1

横方向にはスクロールできます。

DEMO 2

http://codepen.io/kimmy/full/VeQMQz/

クラスにするとこんな感じです。

是非ともDEMOページを横幅を980px以下にしてご観覧ください。