├── README.md ├── assets ├── images │ ├── mens-leather-jacket-e1651243886922.jpg │ └── photo-1511192951894-5d7de7f594b3.jpg └── js │ └── app.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | ## Hide Navbar on Scroll With Responsive Navbar 2 | 3 | --- 4 | 5 | ### Using Tools 6 | 7 | - HTML:5 8 | - Tailwind CSS 9 | - JavaScript 10 | 11 | ### Using JavaScript 12 | 13 | - onclick event 14 | - onscroll event 15 | - window.scrollY 16 | 17 | ### Live Website Link 18 | 19 | Click 20 | -------------------------------------------------------------------------------- /assets/images/mens-leather-jacket-e1651243886922.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/md-rejoyan-islam/hide-navbar-on-scroll-with-responsive-navbar/26c7cd2c3f3b1424496532de2825db30b1c6ebf4/assets/images/mens-leather-jacket-e1651243886922.jpg -------------------------------------------------------------------------------- /assets/images/photo-1511192951894-5d7de7f594b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/md-rejoyan-islam/hide-navbar-on-scroll-with-responsive-navbar/26c7cd2c3f3b1424496532de2825db30b1c6ebf4/assets/images/photo-1511192951894-5d7de7f594b3.jpg -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | const menu = document.getElementById("menu"); 2 | const menuBtn = document.getElementById("menuBtn"); 3 | const header = document.getElementById("header"); 4 | 5 | // menu toggle 6 | let result = false; 7 | menuBtn.onclick = () => { 8 | if (!result) { 9 | menu.classList.remove("hidden"); 10 | result = true; 11 | } else { 12 | menu.classList.add("hidden"); 13 | result = false; 14 | } 15 | }; 16 | 17 | // hide on scroll 18 | let beforeScroll = 0; 19 | window.onscroll = () => { 20 | let newScroll = window.scrollY; 21 | if (newScroll < beforeScroll) { 22 | header.classList.add("sticky", "top-0"); 23 | beforeScroll = newScroll; 24 | } else { 25 | header.classList.remove("sticky", "top-0"); 26 | beforeScroll = newScroll; 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hide navbar on scroll 9 | 10 | 11 | 63 |
64 |
65 | 70 |
71 | 72 | 73 |
74 |
75 |

About Section

76 |

77 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum 78 | aliquid consequatur molestias! Minima, vero sit alias suscipit ipsa 79 | asperiores dolorum recusandae adipisci, dolores quibusdam similique 80 | soluta saepe eius perferendis commodi. Natus optio molestiae porro 81 | dicta veniam delectus illo blanditiis obcaecati sed repudiandae. 82 | Nemo excepturi vero ipsam quibusdam facere. Pariatur possimus 83 | molestiae eligendi nostrum est, unde sunt neque doloribus nam! Quod 84 | aliquam perferendis ea vel voluptates ipsam laboriosam error 85 | cupiditate reprehenderit explicabo officiis hic quisquam, ipsum est, 86 | quidem debitis suscipit? Itaque, harum odit enim porro, veritatis 87 | incidunt consequatur corrupti delectus quas doloremque praesentium 88 | sunt eos labore totam tenetur, in nesciunt voluptatem officia odio 89 | maxime eum nisi quae iure dolorem. Quidem sit unde qui, veritatis 90 | ipsam minima perspiciatis debitis pariatur, ea, obcaecati fugit 91 | inventore velit asperiores amet mollitia nesciunt vero dolores nam 92 | aperiam dolorem? Hic, suscipit animi, molestias nam natus quam 93 | provident nisi excepturi, aperiam veritatis officiis delectus 94 | blanditiis maxime velit fuga? 95 |

96 |
97 |
98 | 99 | 100 |
101 | 106 |
107 |

Services Section

108 |

109 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident 110 | consequuntur fugit minus ex necessitatibus quidem voluptatem 111 | veritatis nulla inventore, libero mollitia, earum molestiae ab 112 | laboriosam ipsum incidunt animi voluptatibus dolor est dolorum cum. 113 | Repellat accusamus voluptatem qui eligendi placeat. Perferendis 114 | neque, maiores iusto corrupti consectetur porro, ex illum vel 115 | ratione ducimus reprehenderit eaque fuga consequuntur aliquid 116 | exercitationem aut. Recusandae necessitatibus harum explicabo 117 | corrupti fugiat repudiandae! Saepe illo earum eveniet maiores 118 | delectus nemo doloremque deserunt facilis rem. Natus soluta 119 | perferendis velit? Aut sequi unde minus at quisquam, tempora 120 | laboriosam nobis dolores consequatur voluptates ducimus quaerat enim 121 | dolor. Eius aliquam neque non voluptatum. Iste in laboriosam 122 | architecto autem, ducimus eum adipisci corporis saepe non, tempore 123 | asperiores tempora aperiam quos commodi necessitatibus quam 124 | laudantium. Magnam, dolor hic nesciunt nulla, aperiam maxime sit 125 | aliquam nam quaerat quis accusantium culpa provident minima fugit, 126 | id vero tenetur error incidunt. Corrupti nulla ipsum eaque, officia 127 | pariatur minima. 128 |

129 |
130 |
131 |
132 | 133 | 138 | 139 | 140 | 141 | --------------------------------------------------------------------------------