求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

position: sticky 復習

position: sticky

f:id:web-0220:20190306001937g:plain

developer.mozilla.org

基本形を理解する
  • スクロールで要素を固定する
  • Safariではプレフィックスが必要です(-webkit-sticky)
  • IEはサポートされてません
  • 固定したい要素の親、先祖要素に overflow: hidden; が入っていると効かない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Stickyを使った演習</title>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="block one">
  <p>One</p>
</div>
<div class="block two">
  <p>Two</p>
</div>
<div class="block three">
  <p>Three</p>
</div>
<div class="block four">
  <p>Four</p>
</div>
<div class="block five">
  <p>Five</p>
</div>
</body>
</html>
@charset "UTF-8";

/* reset
------------------------------- */
html,body,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #fff;
}

/* font-size
------------------------------- */
html {
  font-size: 62.5%;
}

/* body
------------------------------- */
body {
  font-size: 1.6rem
}

/* sticky-item
------------------------------- */
.block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
p {
  font-size: 6.0rem;
  font-family: 'Fredericka the Great', cursive;
}
.one {
  background: #134D71;
  color: #fff;
}
.two {
  background: #2075AA;
  color: #fff;
}
.three {
  background: #34A1DB;
  color: #fff;
}
.four {
  background: #73CDF5;
}
.five {
  background: #B2E4FF;
}
サイドバー固定
  1. 「position: sticky」を設定した場合
  2. 「position: sticky」を設定しない場合

f:id:web-0220:20190306002328g:plain

<div class="block one" id="block-one">
  <p>One</p>
</div>
<div class="block two" id="block-two">
  <p>Two</p>
</div>
<div class="block three" id="block-three">
  <p>Three</p>
</div>
<div class="block four" id="block-four">
  <p>Four</p>
</div>
<div class="block five" id="block-five">
  <p>Five</p>
</div>
<footer class="footer">
<ul class="footer-bar">
<li><a href="#block-one">one</a></li>
<li><a href="#block-two">two</a></li>
<li><a href="#block-three">three</a></li>
<li><a href="#block-four">four</a></li>
<li><a href="#block-five">five</a></li>
<li><a href="#page-top">TOP</a></li>
</ul>
</footer>