In this tutorial we will show you the solution on fixed header on scroll HTML, in html we all make headers that are on the top of the html page or website. The headers in webpages are at the top and mostly used to navigate clients or user from one page to another.
This becomes also a true example that a website is a combination of webpage. The link of the other webpages is given to the points that are given under header section.
Todays, our topic is about that how we are able to make fixed header on scroll html. We hope that you already seen our article on topic that is how to make headers in html.
Step By Step Guide On Fixed Header On Scroll HTML :-
As, we know that the headers are present at top of a webpage and mostly when you scroll the webpage to see the content below screen or display.
The header gets collapsed or get disappeared. So, to provide the solution of this problem today we are here and we tell you that how you are able to make fixed so that when you scroll your html screen, it always gets fixed and appeared on the top of page.
Here, is the code for fixed header in html.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body style="margin: 0;">
<div style="width: 100%; height: 80px; background-color: black; color: white; position: fixed; z-index: 1;top: 0; left: 0;">
<ul style="margin: 0; padding: 20px;list-style-type: none;">
<li style="float: left; padding: 10px; border: 1px solid white;">
HTML TUTORIALS
</li>
<li style="float: left; padding: 10px; border: 1px solid white;">
CSS TUTORIALS
</li>
<li style="float: left; padding: 10px; border: 1px solid white;">
JAVASCRIPT TUTORIALS
</li>
<li style="float: left; padding: 10px; border: 1px solid white;">
BOOTSTRAP TUTORIALS
</li>
<li style="float: left; padding: 10px; border: 1px solid white;">
FOR OTHERS CLICK HERE
</li>
</ul>
</div>
<div style="width: 100%; height: auto; clear: both; margin-top:100px ;">
<p>
other body is displayed here.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum et dolore delectus corrupti omnis tenetur, culpa, alias cum esse itaque facere saepe ducimus, odit harum a ut dolorum beatae optio quia? Eveniet itaque deserunt non mollitia qui inventore quia ullam modi, pariatur omnis iure velit. Incidunt, ea aliquam. Quia odio cum mollitia doloremque odit non deserunt, eos labore officia architecto ipsam porro eligendi soluta, quam quo hic vitae unde eum! Ad quas rem, mollitia, tempore eaque unde molestiae et veritatis eligendi voluptate perspiciatis pariatur sit quae, facere quidem non? Ullam reiciendis iusto quia quod quo, fugiat laboriosam eaque ea consequatur atque mollitia rerum sapiente nostrum doloribus doloremque reprehenderit, eos quibusdam. Numquam sint ducimus quaerat doloremque ab velit harum fugit, animi, non possimus rem necessitatibus? Cum dolor porro maxime dolorum sint, nesciunt maiores magnam a itaque, sit sequi tempore! Non voluptate optio corporis. Non voluptate nulla corporis eaque iste aliquam ad sint, alias quidem, quaerat magni officia ullam neque illo optio accusantium nobis consequuntur vitae omnis! Ipsa earum quidem numquam nisi hic sint deserunt vel voluptate voluptas quo modi nesciunt molestias, atque reprehenderit commodi. Omnis, itaque, illo, aperiam nisi ipsum asperiores dolore fugiat molestias ullam minus magnam et animi. Quasi totam voluptatibus consequuntur, ex illum rerum praesentium distinctio ab at velit eveniet, eum aliquam, placeat ipsum numquam! Quasi voluptas consequatur voluptatum consectetur exercitationem rem, accusantium ipsa vero assumenda eveniet neque dolor sapiente ullam quo, temporibus quis rerum voluptatem adipisci quisquam maiores. Eveniet qui voluptates eaque aliquid minus rerum veniam facilis tempora possimus magnam saepe doloremque, quam esse pariatur? Atque illum earum obcaecati quasi saepe! Sed repellat sunt voluptate reprehenderit officiis facilis totam, enim eligendi vero neque tenetur adipisci nam doloribus nisi exercitationem sit tempore, mollitia assumenda culpa. Earum distinctio nobis autem temporibus eius suscipit quidem aspernatur, voluptate iusto aliquid voluptates nesciunt doloremque eveniet neque sed commodi corporis enim explicabo nulla exercitationem veniam obcaecati! Ex nisi amet quod autem incidunt! Ab optio odio officiis? Nihil, odio adipisci quis distinctio libero porro illo, quae eum aspernatur optio fugit perspiciatis tenetur sit mollitia eius nemo nostrum. Molestiae, cupiditate vitae illo, quod sed doloribus illum, velit obcaecati eligendi fugiat neque eaque ratione tempore fugit animi deleniti quia placeat inventore dolorem deserunt! Veniam sunt, corrupti nostrum itaque ipsam sequi non, omnis optio iusto repellendus dicta possimus quisquam dolores officiis? Quod, consectetur quos beatae porro iusto tempore fuga laborum nulla quo doloremque dolore perferendis quibusdam, aspernatur possimus! Consectetur impedit fuga, iusto non officiis sed aut amet, reprehenderit iure soluta laudantium dolor voluptates explicabo consequatur distinctio totam ipsum eos hic nulla quos. Quibusdam sit eum nesciunt cupiditate quis ex minus magnam sequi, quidem eos, vel error libero quia enim magni ea in labore exercitationem rem aliquid doloremque? Reiciendis maxime laudantium officia harum aliquid repudiandae aperiam deleniti esse. Debitis necessitatibus labore accusantium cumque ut obcaecati ipsam fuga totam vero nulla sed quos deserunt sapiente voluptatum, eaque in beatae maiores nam fugiat at sint porro itaque temporibus? Ipsum nobis beatae unde voluptatem est. Laboriosam iste, fugiat quisquam enim error molestiae qui in eos itaque doloribus beatae ab expedita id sapiente optio dolore ea sint illum provident voluptate recusandae amet. Harum, quisquam porro voluptas, veritatis illum deleniti voluptate sunt odio alias dolores recusandae magni ducimus excepturi labore non perferendis saepe numquam vel modi quasi explicabo? Veniam velit quis neque officiis animi accusamus corrupti perferendis a similique alias atque laborum amet quo earum odit, inventore praesentium! Ab impedit sunt, blanditiis esse debitis nulla quisquam, obcaecati nemo dolore maxime quam consequatur quasi vero rem, saepe enim corporis eum praesentium hic voluptatum reiciendis quia magnam ducimus expedita! Reprehenderit voluptatem, laborum deserunt odio blanditiis recusandae quisquam quod placeat at magni incidunt modi! Autem, consectetur possimus. Commodi quidem numquam ullam. Voluptas non quas totam soluta repellendus exercitationem nemo omnis necessitatibus est odit, minima quam quia nisi commodi excepturi ab blanditiis, alias nesciunt! Officia quae laborum porro explicabo voluptate delectus quia beatae amet unde voluptatibus similique asperiores dolorem culpa, dolorum dolore nulla omnis illo aperiam iure voluptates accusantium quasi! Qui, nesciunt, pariatur accusantium sed itaque quam necessitatibus, officia explicabo nihil at illum. Magnam, rerum quisquam. Adipisci rem, minima doloribus, ex illum sed deserunt nihil porro aspernatur quod praesentium quia quos quaerat corrupti quas velit magni aliquid.
</p>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, here we create two division, first is for header and other is for other body.
- You can also use footer here. After, this we create an ul to make a nav-bar or navigation bar, you can also say it header.
- After this the properties like position fixed, to fixed it on top and margin top 0 , margin left 0 are used with z index 1.
- With the help of these properties we are able to fixed headers on scroll in html, we hope that you will understand this properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of some CSS properties we are able to fixed headers on scroll in html.
The property fixed with its margins like top and left are important to do this. I hope this tutorial on fixed header on scroll HTML helps you.
About Amruta
