Sticky button bottom header

Developer
Tiberiu Raducea
Size
2,802 Kb
Views
42,504
  1. Sticky button bottom header Previews
  2. Sticky button bottom header HTML Codes
  3. Sticky button bottom header CSS Codes
  4. Sticky button bottom header JS Codes

How do I make an sticky button bottom header?

What is a sticky button bottom header? How do you make a sticky button bottom header? This script and codes were developed by Tiberiu Raducea on 25 September 2022, Sunday.

Sticky button bottom header Previews
IQ Test

Sticky button bottom header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky button bottom header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header class="site-header"> <h2>Scroll down</h2> </header> <div class="arrow-down">↓ ↓</div> <a class="fixed-link" href="https://tibix.co.uk/">This is the link</a>
</div>
<div id="footer"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky button bottom header - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
@import url(https://fonts.googleapis.com/css?family=Raleway);
body { font-family: 'Raleway', sans-serif;
}
header {
height: 300px; background: #ccffff;
}
.container { height: 3000px; width:100%;
}
.arrow-down { position:fixed; color: #000; top:0; bottom:0; left:0; right:0; margin: 0 auto; width: 30px; padding-top: 50px;
}
.container h2 { position: fixed; top:0; bottom:0; left:0; right:0; text-align: center; padding-top:20px;
}
.fixed-link { position: relative; top: 20px; left: 20px; padding: 10px 20px 10px 20px; background: #f1f1f1; color: #fff; cursor: pointer;
}
#footer { width: 100%; background:#8e44ad; height:2000px;
}
.classThatMakesBoxActRight { bottom: 24% !important; left: 20px; padding: 10px 20px 10px 20px; background: #f1f1f1;
}
.fixed-link:after { pointer-events: none; position: absolute; width: 100%; height: 100%; content:''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
.fixed-link:before { speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased;
} .fixed-link {	background:#F47A20;	border: 1px solid #F47A20; -webkit-transition: -webkit-transform ease-out 0.3s, background 0.3s; -moz-transition: -moz-transform ease-out 0.3s, background 0.3s; transition: transform ease-out 0.3s, background 0.3s;
}
.fixed-link:after { top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9);
}
.fixed-link:hover { color: #fff;	border: 1px solid #F47A20;
}
.fixed-link:after {	border: 1px solid #F47A20; -webkit-animation: sonarEffect 0.6s ease-out; -moz-animation: sonarEffect 0.6s ease-out; animation: sonarEffect 0.6s ease-out;
}
@-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); -webkit-transform: scale(1.1); opacity: 0; }
}
@-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); -moz-transform: scale(1.1); opacity: 0; }
}
@keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #F47A20, 0 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1.1); opacity: 0; }
}
.on-the-spot { position: relative;
}
.move-with-page { position: fixed;
}

Sticky button bottom header - Script Codes JS Codes

 function checkOffset() { var a = $(document).scrollTop() + window.innerHeight; var footer_top = $('#footer').offset().top; var header_bottom = $('.site-header').offset().top + $('.site-header').outerHeight(true); var top = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0); var container = $('.fixed-link'); if (top > header_bottom) { container.addClass('move-with-page').removeClass('on-the-spot'); var container_bottom = container.offset().top + container.outerHeight(true); if (top > container_bottom ) { container.css('bottom', (10 + (top - footer_top)) + 'px'); } } else { container.removeClass('move-with-page').addClass('on-the-spot'); } } $(document).ready(checkOffset); $(document).scroll(checkOffset);
Sticky button bottom header - Script Codes
Sticky button bottom header - Script Codes
Home Page Home
Developer Tiberiu Raducea
Username tyberiu88
Uploaded September 25, 2022
Rating 3
Size 2,802 Kb
Views 42,504
Do you need developer help for Sticky button bottom header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tiberiu Raducea (tyberiu88) Script Codes
Name
Sass random
Under Maintenance
Wedding loader
Under Maintenance
Technical difficulties
Funky Scroll up and down
Ping CSS
A Pen by Tiberiu Raducea
Radar pulse
Cookie policy Sass options
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!