sticky header js and css

Rivas-Jorge · Jan 16, 2023 · 52caca0 · 52caca0
1 parent 626bdf0
commit 52caca0
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 46 deletions.
diff --git a/alchemist.html b/alchemist.html
@@ -8,16 +8,20 @@
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="container" class="header">
+    <div class="container" >
+      <div id="myHeader" class="header">
         <a href="index.html"><button>Home</button></a>
         <div class="wrapper">
             <input type="text" id="text-to-search" placeholder="Enter text to search...">
             <button onclick="search()">Search</button>
+      </div>
         </div>
         <br>
+      <div class="top-container">
         <h6>Author</h6>
         <h1>Paulo Coelho</h1>
         <h6>Brazilian lyricist</h6>
+      </div>
         <p id="paragraph">
             THE BOY’S NAME WAS SANTIAGO. DUSK WAS FALLING AS the boy arrived
             with his herd at an abandoned church. The roof had fallen in long

diff --git a/error404.html b/error404.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>error404.Not Found</title>
+    <title>error404</title>
 </head>
 <body>
     <h1>    error 404......NOT FOUND</h1>

diff --git a/index.html b/index.html
@@ -1,37 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BOOKS</title>
-   <link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BOOKS</title>
+  <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-    <div class="container">
-        <div class="wrapper">
-            <input type="text" id="text-to-search" placeholder="Enter book title..">
-            <button onclick="search()">Search</button>
-        </div>
-        <br>
-
-        <ul >
-            <a href="alchemist.html" id="paragraph"><li>The alchemist</li></a>
-            <br>
-            <a href="lifeofpi.html"id="paragraph" ><li>life of Pi</li></a>
-            <br>
-            <a href="error404.html" id="paragraph"><li>Javascript: The definitive Guide</li></a>
-            <br>
-            <a href="error404.html" id="paragraph"><li>The Linux Programming Interface</li></a>
-            <br>
-            <a href="error404.html" id="paragraph"><li>The Big Book of small python projects</li></a>
-
-        </ul>
+  <div class="container">
+    <div class="wrapper">
+      <input type="text" id="text-to-search" placeholder="Enter book title..">
+      <button onclick="search()">Search</button>
     </div>
+    <br>
+
+    <ul>
+      <a href="alchemist.html" id="paragraph">
+        <li>The alchemist</li>
+      </a>
+      <br>
+      <a href="lifeofpi.html" id="paragraph">
+        <li>life of Pi</li>
+      </a>
+      <br>
+      <a href="error404.html" id="paragraph">
+        <li>Javascript: The definitive Guide</li>
+      </a>
+      <br>
+      <a href="error404.html" id="paragraph">
+        <li>The Linux Programming Interface</li>
+      </a>
+      <br>
+      <a href="error404.html" id="paragraph">
+        <li>The Big Book of small python projects</li>
+      </a>
 
+    </ul>
+  </div>
 
 
-    <!-- script  -->
-    <script src="script.js"></script>
+
+  <!-- script  -->
+  <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -1,10 +1,27 @@
+///text to search code
+function search() {
+  let textToSearch = document.getElementById("text-to-search").value;
+  let paragraph = document.getElementById("paragraph");
+  textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
-function search(){
-    let textToSearch = document.getElementById("text-to-search").value;
-    let paragraph = document.getElementById("paragraph");
-    textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  let pattern = new 
+  RegExp(`\\b${textToSearch}\\b`,"gi");
 
-    let pattern = new RegExp(`${textToSearch}`,"gi");
+  paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `<mark>${match}</mark>`)
+}
+
+///sticky header code 
+
+window.onscroll = function () {myFunction()};
+
+var header = document.getElementById("myHeader");
+var sticky = header.offsetTop;
+
+function myFunction() {
+  if (window.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+}
 
-    paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `<mark>${match}</mark>`)
-}
diff --git a/style.css b/style.css
@@ -1,24 +1,20 @@
 * {
     padding:0;
-    margin: 0;
     box-sizing: border-box;
     font-family: 'Rubik', sans-serif;
 }
 
 body {
+    margin: 0;
     height: 100%;
 
 }
 
 .container {
-
-    width: auto;
-    background-color: #ffffffff;
+    margin: 0 auto;
+    width: 56em;
+    background-color: #f5f5f5ff;
     padding:  50px 40px;
-    position: absolute;
-    transform: translate(-50%, -0%);
-    top: 50%;
-    left: 50%;
     border-radius: 5px;
     box-shadow: 0 20px 35px rgba(60, 60, 60, 0.2);
 }
@@ -53,6 +49,29 @@ a {
   text-decoration: none;
 }
 a:hover {
-  color: #000;
-  transition: all .5s;
-}
+  color: #e61919;
+  transition: all 0.7s;
+}
+.top-container {
+  background-color: f1f1f1;
+  padding: 30px;
+  text-align: center;
+}
+.header {
+  padding: 20px 160px;
+  background: 555;
+  color: f1f1f1;
+  background-color: #b3b3b3;
+}
+.content {
+  padding: 16px;
+}
+.sticky{
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+.sticky + .content {
+  padding-top: 102px;
+}
+