Sticky Footer on Scroll using HTML CSS and JavaScript

Sticky Footer on Scroll using HTML CSS JavaScript

What is footer on a website? A Footer is an important website element that found at the bottom of any website. The website footer is as Essential as the other fundamental structural components like the header, navigation bar, main content, and sidebar. Its purpose is to provide other supplementary information, quick navigation links, legal or contact details, and so on. In this blog post, we are going to share a sticky website footer design snippet with you. Below is a video tutorial on this. If you want, you can watch the tutorial made on the website footer example.

Video Tutorial:

We hope you have watched the video tutorial above. Website footer design is necessary as it helpful for user navigation, SEO Benefits, branding, building credibility, etc. A typical website footer normally contains links to important pages like About Us, Contact Us, Privacy Policy, Terms of Service, an so on. In some footer designs, we often see other elements like social media icons, newsletter subscription forms, copyrights, etc.

A sticky footer or fixed footer on a scroll is special type of footer which remains visible of the viewport as the visitor scroll the page. A regular footer is only visible when the user scrolls to the bottom of the page. In the case of a sticky footer, it is always accessible to the user no matter if they are in the middle or top of the page. It ensures the other supplementary information is always visible along with the main information. It is also important for Enhanced User Experience, mobile optimization, boosting conversion rates, etc. We have used HTML, CSS, and Vanilla JavaScript to make our fixed footer on the scroll snippet.

You May Also Like:

Fixed Footer on scroll [ Source code ]:

To create the fixed footer design on scroll, we will need to create an HTML file and a CSS file. You can create a separate JS file to put the JavaScript code there. Remember to link the CSS and JS files in the HTML. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if it is working. If there is a problem, you can download the code using the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Footer on Scroll using HTML CSS & Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo at, minus quod architecto atque maiores veritatis placeat? Laboriosam quos quisquam quam ducimus perferendis sapiente. Perspiciatis saepe vel maxime, animi assumenda quo sint voluptatum laudantium! Repudiandae, dicta? Quibusdam commodi, distinctio vero aliquid, vitae nisi totam fuga incidunt fugiat officiis ex dolor a porro repudiandae, autem eveniet. Deserunt voluptas dignissimos, nisi obcaecati, hic, recusandae doloribus fugit sapiente corporis dolor voluptatem repudiandae beatae! Eaque pariatur corporis voluptate minima sit temporibus velit, fugit rem assumenda enim ea deserunt dolores laborum cum, asperiores eligendi doloremque est reprehenderit! Porro doloremque maiores, id cum numquam, facere architecto voluptates ducimus ipsa nemo eum iste repellendus aperiam, ad nisi blanditiis quod dicta iusto dolorem praesentium a? Consectetur expedita, dolor cupiditate iste repellendus earum, similique, nobis est magni soluta sunt sed veniam! Reprehenderit molestiae at hic? Esse error incidunt facilis. Impedit alias magni rem excepturi molestiae vel ipsam cum eum ipsum culpa distinctio sunt, nostrum consequatur commodi quas veniam. Assumenda, ipsa quod perspiciatis modi excepturi id maxime dolore facere, exercitationem totam autem necessitatibus. Temporibus, tempore minima laudantium id reprehenderit omnis natus tempora enim? Dolorem aspernatur rerum praesentium officia, laborum at sapiente reprehenderit commodi cumque alias beatae sed magnam suscipit distinctio temporibus dignissimos corrupti ullam reiciendis quam velit delectus qui odit numquam neque. Earum, minima nam? Mollitia nulla suscipit eligendi, deleniti harum quisquam aut neque incidunt dicta quibusdam laboriosam! Unde, voluptatibus? Nobis non tenetur repellat placeat. Rerum, nostrum! Maxime cupiditate ab cum esse adipisci qui officiis iusto maiores natus eum alias, ut nam mollitia, itaque distinctio dolore? Asperiores expedita illo reprehenderit deleniti suscipit labore quisquam doloribus facere numquam. Velit suscipit laudantium voluptatem itaque assumenda officia obcaecati hic harum, eius quia unde repellat tenetur. Corrupti cupiditate autem suscipit nihil pariatur deserunt facere nobis voluptatibus natus nisi, vitae est ipsam, at ducimus laborum earum! Quae reprehenderit totam magnam quasi, ex exercitationem, quis rem similique eveniet ab iure fugiat quia sint doloremque est nemo facilis harum. Eveniet quis sequi qui dignissimos neque. Sint, doloribus natus. Libero quaerat facere reprehenderit quis tempore corporis iusto vitae placeat. Libero, delectus officia. Inventore eum, accusamus mollitia nulla similique, hic exercitationem adipisci repudiandae sint illum dolorum earum consequatur perferendis labore doloribus. Facilis, ab quasi? Eaque nam amet, quaerat sequi, unde animi corrupti ut, voluptatum qui modi aspernatur minus velit beatae cupiditate soluta ad debitis minima. Id, atque officiis excepturi corrupti quibusdam sint ducimus. Illo explicabo, sapiente consequuntur labore accusantium quibusdam quod? Earum repellat, ea error maiores eligendi quas esse cupiditate sint, distinctio neque, velit in quod consequuntur voluptates illum odit? Sequi nihil expedita nesciunt at quia mollitia iusto optio perspiciatis? Ipsum pariatur aliquid doloribus eaque voluptatem consequuntur accusantium ipsam provident culpa, esse asperiores cum quos. Labore dolores eveniet delectus placeat deserunt expedita nobis ex, nemo deleniti provident in animi maiores enim sapiente consequatur, sed nulla blanditiis excepturi quaerat sint officia magni dicta. Veniam ab praesentium quidem impedit. Odit nesciunt quo rerum. Enim atque reprehenderit laborum esse dolorum nostrum, ducimus quia sunt debitis eligendi quis eaque molestias minus sapiente optio mollitia quibusdam eveniet delectus placeat! Dignissimos doloribus ducimus perspiciatis debitis in placeat explicabo? Mollitia, voluptatum sit placeat amet repudiandae nisi excepturi fuga officia vero voluptatibus tempore sint doloribus cum consequuntur modi? Hic ratione eveniet exercitationem aut magni! Iusto nihil officia quidem. A corporis ea quia optio debitis asperiores facilis. Laborum, non, ut velit ab dignissimos nihil facilis odit temporibus sunt dolore necessitatibus, doloribus neque fugiat voluptatem sed. Accusantium eos iste quam et eligendi corporis numquam sit consequuntur tempore dolorem incidunt, libero ipsa facilis, perspiciatis impedit! Veritatis iure ex officia. Ipsa harum consequatur iusto voluptatem fuga optio, laborum ullam. Odit deserunt odio ad ipsum laboriosam magnam nobis impedit. Molestias aperiam, perspiciatis repellat nobis vero placeat, nemo amet inventore iste, doloremque laborum voluptate. Nemo adipisci ducimus repellendus, iste ipsa id laudantium animi. Cupiditate numquam porro qui quidem, quod et suscipit error dolorum laboriosam iusto mollitia praesentium aliquid quae. Quas totam at autem sint odio cupiditate, impedit, cumque ipsa sed, id tempore incidunt eaque animi optio eum atque molestias asperiores nesciunt nostrum culpa? Incidunt quod error vero nostrum ut facilis inventore doloremque voluptatem eveniet dolore impedit soluta, in ipsa nobis dicta quam cumque delectus dolores blanditiis expedita. Dolores velit rem, aperiam modi quae nulla, sint, dignissimos beatae sit commodi voluptas. Quos est cum facilis harum maxime amet accusamus odit reprehenderit recusandae? Facere eveniet quam vitae hic, delectus quisquam nostrum at soluta iusto voluptatibus laudantium. Recusandae eligendi eius numquam obcaecati ipsum totam corrupti rem, pariatur, animi tenetur assumenda error perferendis ducimus commodi? Laboriosam recusandae reprehenderit inventore nostrum tempore consequuntur assumenda beatae alias voluptatibus ipsam illum qui, neque magni quae quia unde totam culpa deleniti harum, fuga ducimus eius. Voluptatem quos nemo cumque in tenetur, praesentium deserunt consequuntur illo consequatur esse animi, beatae commodi quis debitis earum, et pariatur architecto harum veniam excepturi! Sit tempore quos ipsam a? Explicabo, obcaecati. Repellendus quam non aut sapiente recusandae sed qui, voluptas vel quasi laboriosam voluptatibus illo corporis corrupti enim itaque ratione tempora dicta iure facere alias. Illum est cumque quibusdam ipsa saepe sunt ipsum quidem quisquam vero, corrupti soluta? Aspernatur nihil quaerat possimus distinctio, odit veritatis quos nemo dicta sint, earum error quam! Laudantium delectus consequatur incidunt aut unde corporis nobis tempore odit vel animi, sint, reprehenderit praesentium assumenda, amet at aperiam? Eos harum distinctio incidunt doloribus deleniti recusandae, tenetur aperiam quam beatae saepe! Ipsum earum voluptates doloremque dolorum excepturi nesciunt libero sint porro vel animi aut cupiditate, dolor hic magnam, voluptatem ea, nihil dolorem illo odio similique minima! Beatae voluptates quibusdam magnam ea fugiat, modi nesciunt alias corporis qui soluta repellat aliquid laudantium sint nam, laborum laboriosam aliquam odit enim reprehenderit autem explicabo vitae molestiae inventore. Autem reprehenderit vero, cumque, laborum animi tempora sapiente inventore deleniti, similique nostrum molestiae ea optio temporibus saepe consequatur et. Dolor sequi quidem ipsum porro. Obcaecati, provident? Fuga numquam officia architecto quasi suscipit nisi amet pariatur quis assumenda. Suscipit, praesentium. Sit ad tenetur eius id repudiandae exercitationem explicabo libero, ex laborum eveniet, numquam facere rerum, qui nihil asperiores impedit expedita quidem nesciunt. Dignissimos quidem modi sunt, velit numquam iure animi rem neque ad impedit earum laudantium libero non eaque facilis blanditiis ullam voluptatum voluptates minima accusantium facere officia in eius doloremque. Esse, voluptas? Vero molestiae accusamus laborum, corporis quisquam culpa esse, iure nam atque dolor eius ea temporibus? Eos doloremque iure corporis nisi porro excepturi, rerum illo vitae consequatur autem laborum quas quasi ullam suscipit impedit veniam. Consequatur tempore distinctio quaerat. Itaque veritatis quasi temporibus non soluta exercitationem accusantium expedita quae ratione sapiente? Neque, nobis. Tempora officiis inventore magni, maiores cum rerum illo, veniam, sunt ducimus ratione at quod laboriosam sapiente iusto nobis necessitatibus odit sed enim. Incidunt tenetur magni at eveniet. Autem vitae deserunt eaque cumque laudantium rerum doloremque recusandae a, natus, praesentium voluptates pariatur fugit et dolores laborum voluptatibus, maxime consequatur! Molestiae reiciendis consequuntur nam quibusdam dignissimos quod aut beatae, asperiores omnis commodi deserunt fugiat voluptates ullam atque officiis? Cumque nobis quia, cum harum ipsam adipisci eius neque ipsum dolores consequuntur fugit officia, dignissimos vitae. Eos similique iusto nostrum esse minima sed deleniti vel soluta cumque enim. Deserunt ea soluta placeat, sunt dicta adipisci porro sed nobis iure quam, ex ut eligendi itaque ad a nostrum dolor, hic impedit error numquam! Cum porro culpa eum saepe minus pariatur soluta eveniet perspiciatis vel? Ea accusantium, dolore ipsa facere repellendus inventore. Deserunt dignissimos vitae in fuga sunt voluptas incidunt? Similique odit vero aspernatur labore deserunt, neque maiores hic quaerat possimus doloribus. Quas ipsum quisquam suscipit enim iure unde quam reprehenderit a, sunt vero expedita optio nulla aliquam assumenda qui est commodi reiciendis tempore! Alias ullam cum temporibus debitis libero vitae tempore, explicabo in praesentium laboriosam recusandae est voluptas atque voluptatem assumenda magni reiciendis. Temporibus accusamus ut corporis enim magnam necessitatibus ab, neque optio, atque dolor impedit quam itaque eum repellat natus debitis esse vero cum aspernatur tempora sed pariatur alias voluptatem? Laboriosam, sunt laborum vitae quae iste reprehenderit facilis voluptas porro quia, placeat expedita officia veniam debitis perferendis maxime commodi aliquam maiores minima nostrum suscipit praesentium quidem excepturi. Unde debitis nam, enim, dolores et quia explicabo laborum eveniet, voluptatem magnam magni provident. Placeat, nobis natus. Eligendi et aspernatur dolores corporis deleniti, illo error repellendus nemo minima sit. Quis tenetur dignissimos officiis rem aliquid iste! Voluptatem enim voluptas, ducimus molestiae atque exercitationem expedita ipsum in sed, saepe hic aperiam dolorum cum. Sapiente pariatur dolorum voluptate magnam deleniti, ratione libero molestiae harum rerum iusto magni dicta ducimus suscipit error possimus laboriosam quia placeat quos aliquid repudiandae praesentium a? Quia, obcaecati ex provident quod eos numquam aut voluptates, ipsum porro commodi debitis odit tenetur in odio cum vitae reiciendis. Dolore at ad eum ullam, dignissimos amet vitae ipsa architecto est ipsam veritatis similique exercitationem! Doloremque aspernatur, minima quam excepturi dolore ipsam cumque asperiores deleniti itaque iusto ratione repudiandae mollitia dolor totam ipsa assumenda tenetur vero vitae illum quidem nostrum atque? Similique rerum sequi, quidem maiores fugiat facere excepturi, ex hic obcaecati commodi facilis necessitatibus? Minus voluptatum fuga minima facilis. Nostrum id provident quos ex! Voluptatum, beatae tempora voluptates molestias hic veritatis ullam temporibus necessitatibus ducimus sint consectetur inventore ipsum veniam nisi, quisquam pariatur fuga quis, ex aspernatur. Cupiditate vel illum explicabo animi deserunt magnam nam ex iusto beatae, eius aliquid ratione maxime nostrum veritatis corrupti ipsa quibusdam error nisi unde in praesentium consequuntur? Nostrum velit ratione quidem quo dolor nisi, amet officia beatae quisquam nihil tempore recusandae aspernatur non, accusamus animi, doloribus ut! Inventore molestias rerum consequatur dolorem nostrum, tempora magni recusandae voluptates veritatis at ipsa expedita praesentium ipsum ut aut officia provident quaerat est accusantium. Iusto in incidunt sit veniam itaque libero tempora, cum molestias ut amet quisquam optio, esse et quos sunt recusandae placeat at deserunt aspernatur, possimus dolore sint laborum illo. Quidem libero numquam, at officiis voluptates rerum tenetur repellendus totam in nihil saepe aut. Cumque obcaecati, labore ut dicta illo natus placeat! Quam quo, esse corporis nisi officiis asperiores, deleniti cupiditate veniam soluta dolore recusandae sunt laboriosam iusto non voluptates omnis delectus minima animi corrupti, ea magni modi unde velit. Voluptatem accusamus doloremque alias quos eius laudantium tempora, sunt beatae vel, ullam aliquam odio! Dolor laboriosam, dicta ab quae facere dolore harum autem asperiores molestiae cupiditate aut aliquam repudiandae molestias quis, similique delectus aliquid obcaecati qui iure. Asperiores necessitatibus minus beatae. Eaque numquam repellat ex nemo quae at. Hic, et vitae. Quod debitis ipsa temporibus non illum libero similique fugiat recusandae sapiente architecto voluptatum tempora quae, natus dolores laboriosam suscipit unde expedita vel dolorem porro. Rerum illum omnis nulla iste iure quaerat ipsum, ex pariatur blanditiis ut, culpa nam? Reiciendis, laborum. Laboriosam ab aut perspiciatis. Officia quis, a temporibus adipisci necessitatibus quia! Ratione expedita eum excepturi delectus incidunt ipsum quibusdam ipsam ullam illum quos in consequatur rerum quis consequuntur laboriosam, ab aut assumenda deleniti debitis voluptate totam alias qui cum. Maxime eos ea consequuntur voluptas. Officia voluptatibus ut tempore voluptas nostrum eos provident officiis eius porro sit dolorum dicta rem rerum dolore, labore ipsam repellendus. Voluptas neque, voluptatibus delectus ipsam veniam odio est itaque tempora. Tenetur, hic? Cum, temporibus. Saepe ratione dolore, voluptatum dignissimos tempora eos, qui suscipit libero architecto delectus ut voluptas, molestias consequuntur odit tempore minus laborum sapiente maiores ipsam repudiandae aliquam iste atque! Eligendi nulla doloribus qui, rem id earum excepturi voluptas, eum dolor, similique dolore nesciunt culpa veritatis illo impedit? Animi ad eos voluptatem beatae dolore laborum in, aliquam quis quaerat, ratione sit odit magnam pariatur laudantium earum vero non minus eum saepe sequi quisquam obcaecati architecto omnis. Nihil veritatis amet dolor, est sit ipsam explicabo? Esse, delectus reprehenderit necessitatibus deserunt, nostrum quasi minima asperiores veritatis laborum, distinctio laboriosam! Corrupti consectetur obcaecati dolore totam quisquam expedita rem asperiores voluptatibus iure vitae quasi, cupiditate doloremque tempore eum eveniet rerum iusto sunt! Facilis dolore provident harum, dicta minus possimus cumque quidem delectus id dolorem minima magnam labore numquam exercitationem quos voluptatibus. Doloribus obcaecati quisquam dolor nobis natus? Nobis corrupti at tempora veniam ipsum totam adipisci quis esse molestias quam, a quo. Quos eius molestias aliquid cum, nihil similique.</p>
        
      </div>
      
      <div class="footer">
          <div class="footer-content">
            <div class="footer-logo">
                <img src="1.png" alt="Logo">
              </div>
              <nav class="footer-nav">
                <ul>
                  <li><a href="#">Terms</a></li>
                  <li><a href="#">Copyright</a></li>
                  <li><a href="#">Pricing</a></li>
                  <li><a href="#">Policies</a></li>
                </ul>
              </nav>
          </div>
      </div>


      <script>
        let prevScrollPos = window.pageYOffset;
        const footer = document.querySelector('.footer');

        window.onscroll = function() {
            let currentScrollPos = window.pageYOffset;
            if (prevScrollPos > currentScrollPos) {
                footer.style.transform = 'translateY(0)';
            } else {
                footer.style.transform = 'translateY(100%)';
            }
            prevScrollPos = currentScrollPos;
        }
      </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", serif;
}
body {
	position: relative;
	margin: 0;
	padding-bottom: 6rem;
	min-height: 100%;
	background: #fff;
}
.content {
	margin: 0 auto;
	padding-top: 60px;
	max-width: 1200px;
	width: 95%;
	line-height: 30px;
	padding-bottom: 60px;
	color: #262626;
}
.content p {
	text-align: justify;
}
.footer {
	background: linear-gradient(112.1deg, #202639 11.4%, #3f4c77 70.2%);
	padding: 20px 0;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	transition: transform 0.3s ease;
}
.footer-content {
	color: #fff;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer-logo img {
	width: 40px;
	margin-bottom: 10px;
}
.footer-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
}
.footer-nav li {
	margin-right: 20px;
}
.footer-nav li:last-child {
	margin-right: 0;
}
.footer-nav a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}

In a website design, there is a lot of important information that doesn’t fit into the main content. The footer acts as a catch-all for that information. We hope you have collected the source code. If you need more, please click the load more button below our homepage. Thanks for the visit.

DOWNLOAD CODE

Video Tutorial:

Fixed Footer on scroll [ Source code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Sticky Footer on Scroll using HTML CSS and JavaScript

Video Tutorial:

Fixed Footer on scroll [ Source code ]:

You might like

Post a Comment

Post a Comment

Contact Form