✨sticky：bottomのデモの追加

tonkotsuboy · Feb 1, 2021 · b6bec23 · b6bec23
1 parent c4c85a4
commit b6bec23
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/3_special/2_sticky/css/style.css b/3_special/2_sticky/css/style.css
@@ -41,16 +41,19 @@ main,
   z-index: 0;
 }
 
+main {
+  margin-top: calc(50vh + 24px);
+}
+
 .navigation {
   z-index: 2;
-  margin-top: calc(50vh + 24px);
   background-color: #393f43;
   height: 80px;
   display: grid;
   grid-auto-flow: column;
   align-items: center;
   position: sticky;
-  top: 0;
+  bottom: 0;
 }
 
 .brandlogo {

diff --git a/3_special/2_sticky/index.html b/3_special/2_sticky/index.html
@@ -19,24 +19,6 @@
       height="1080"
       alt=""
     />
-    <nav class="navigation">
-      <div class="brandlogo">
-        <img
-          class="brandlogo_image"
-          src="./images/brand_logo.svg"
-          width="37"
-          height="28"
-          alt=""
-        />
-      </div>
-      <ul class="header_link-list">
-        <li><a href="#">HOME</a></li>
-        <li><a href="#">PROFILE</a></li>
-        <li><a href="#">GALLERY</a></li>
-        <li><a href="#">BLOG</a></li>
-        <li><a href="#">CONTACT</a></li>
-      </ul>
-    </nav>
     <main>
       <section id="profile" class="profile">
         <hgroup class="section-title">
@@ -54,6 +36,24 @@ <h3 class="jp">うにちゃんについて</h3>
           <img src="./images/profile.png" alt="" />
         </figure>
       </section>
+      <nav class="navigation">
+        <div class="brandlogo">
+          <img
+                  class="brandlogo_image"
+                  src="./images/brand_logo.svg"
+                  width="37"
+                  height="28"
+                  alt=""
+          />
+        </div>
+        <ul class="header_link-list">
+          <li><a href="#">HOME</a></li>
+          <li><a href="#">PROFILE</a></li>
+          <li><a href="#">GALLERY</a></li>
+          <li><a href="#">BLOG</a></li>
+          <li><a href="#">CONTACT</a></li>
+        </ul>
+      </nav>
       <section class="gallery">
         <hgroup class="section-title">
           <h2 class="en">Gallery</h2>