position: stickyで固定表示させようとしたら、
IE11はサポート外のようで表示が思ったようにいかなかった。
しかし、オープンソースのsticky-stateを使うことで解決できたのでメモしておく。
sticky-state
コード
- sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/sticky-state_mod.css">
</head>
<body>
<header class="sticky">
ヘッダー
</header>
<div class="wrapper">
<p>
コンテンツエリア1<br>
コンテンツエリア2<br>
コンテンツエリア3<br>
コンテンツエリア4<br>
コンテンツエリア5<br>
コンテンツエリア6<br>
コンテンツエリア7<br>
コンテンツエリア8<br>
コンテンツエリア9<br>
コンテンツエリア10<br>
コンテンツエリア11<br>
コンテンツエリア12<br>
コンテンツエリア13<br>
コンテンツエリア14<br>
コンテンツエリア15<br>
コンテンツエリア16<br>
コンテンツエリア17<br>
コンテンツエリア18<br>
コンテンツエリア19<br>
コンテンツエリア20<br>
</p>
</div>
<footer class="sticky">
<p>フッター</p>
</footer>
<script src="./js/sticky-state.min.js"></script>
<script>
new StickyState(document.querySelectorAll('.sticky'));
</script>
</body>
</html>
- sticky-state_mod.css
@charset "UTF-8";
.sticky {
position: -webkit-sticky;
position: sticky;
}
.sticky.sticky-fixed.is-sticky {
position: fixed;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
margin-top: 0 !important;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
margin-bottom: 0 !important;
}
.sticky.sticky-fixed.is-absolute{
position: absolute;
}
.wrapper{
min-height: 100vh;
}
header{
width: 100%;
background-color: blue;
color: #fff;
text-align: center;
padding: 30px 0;
top: 0;
}
footer{
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
bottom: 0;
}