차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:classlist_property [2021/06/08 17:35]
emblim98 [Fallback Example: toggle]
+++ wiki:javascript:javascript_note:classlist_property [2023/01/13 18:44] (현재)
@@ 줄 743: / 줄 743: @@
     <p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
     <p>
-      In this example, we check if the browser supports the classList.toggle() method. If not, use the className property together with other JS properties and methods to achieve the sane result (for
+      In this example, we check if the browser supports the classList.toggle() method.
-      IE9).
+      If not, use the className property together with other JS properties and methods
+      to achieve the same result (for IE9).
     </p>
-    <p>Click the button to toggle between adding and methods to achieve the same result (for IE9)</p>
+    <p>Click the button to toggle between adding and methods to achieve
+    the same result (for IE9)</p>
     <button onclick="myFunction()">Try it</button>
@@ 줄 778: / 줄 780: @@
 스티키 네비게이션 바 (sticky navigation bar) 만들기\\
 <code javascript>
+<head>
+    <style>
+      body {
+        margin: 0;
+        font-size: 28px;
+      }
+      .header {
+        background-color: #f1f1f1;
+        padding: 30px;
+        text-align: center;
+      }
+      #navbar {
+        overflow: hidden;
+        background-color: #333;
+      }
+      #navbar a {
+        float: left;
+        display: block;
+        color: #f2f2f2;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+      }
+      #navbar a:hover {
+        background-color: #ddd;
+        color: #000;
+      }
+      #navbar a.active {
+        background-color: #4caf50;
+        color: white;
+      }
+      .content {
+        padding: 16px;
+      }
+      .sticky {
+        position: fixed;
+        top: 0;
+        width: 100%;
+      }
+      .sticky + .content {
+        padding-top: 60px;
+      }
+    </style>
+  </head>
+  <body onscroll="myFunction()">
+    <div class="header">
+      <h2>Scroll Down</h2>
+      <p>Scroll down to see the sticky effect.</p>
+    </div>
+    <div id="navbar">
+      <a href="javascript:void(0)" class="active">Home</a>
+      <a href="javascript:void(0)">News</a>
+      <a href="javascript:void(0)">Contact</a>
+    </div>
+    <div class="content">
+      <h3>Sticky Navigation Example</h3>
+      <p>The navbar will stick to the top when you reach its scroll position.</p>
+      <p>
+        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
+        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
+        id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
+        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+      </p>
+      <p>
+        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
+        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
+        id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
+        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+      </p>
+      <p>
+        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
+        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
+        id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
+        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+      </p>
+      <p>
+        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
+        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
+        id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
+        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+      </p>
+      <p>
+        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
+        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
+        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
+        his ad. Eum no molestiae voluptatibus.
+      </p>
+    </div>
+    <script>
+      // Get the navbar
+      var navbar = document.getElementById('navbar');
+      // Get the offset position of the navbar
+      var sticky = navbar.offsetTop;
+      // Add the sticky class to the navbar when you reach its scroll position.
+      Remove the sitcky class when you leave the scroll position.
+      function myFunction() {
+        if (window.pageYOffset >= sticky) {
+          navbar.classList.add('sticky');
+        } else {
+          navbar.classList.remove('sticky');
+        }
+      }
+    </script>
+  </body>
 </code>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구