Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Smooth Slider Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero-slider">
<h1>Sticky Smooth Slider Nav</h1>
<p>Sleek and modern navigation solution combines sticky menu with smooth sliding, enhancing engagement and
accessibility.</p>
<div class="hero-slider-nav">
<a href="#home" class="slider-nav-item">Home</a>
<a href="#about" class="slider-nav-item">About</a>
<a href="#features" class="slider-nav-item">Features</a>
<a href="#contact" class="slider-nav-item">Contact</a>
<a href="#login" class="slider-nav-item">Login</a>
<span class="slider-nav-highlight"></span>
</div>
</div>
<div class="content">
<div class="slide" id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quisquam mollitia blanditiis quod minima
vitae. Facere unde nemo minima sint. Aspernatur cupiditate sapiente quis temporibus sunt velit,
similique molestiae. Dolorum.</p>
</div>
<div class="slide" id="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eveniet mollitia recusandae,
officia, optio, ratione unde earum dolor nostrum amet quos alias sapiente dignissimos aliquam explicabo
odio harum velit assumenda!</p>
</div>
<div class="slide" id="features">
<h1>Features</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti rem sed enim voluptate recusandae
officiis error veritatis cupiditate porro sit, maiores excepturi consectetur molestiae vitae animi quod
illo deserunt. Laudantium!</p>
</div>
<div class="slide" id="contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, veniam velit. Dicta vero id excepturi
aperiam neque consectetur animi, sequi tempore consequuntur! Officiis deleniti maxime neque id
perspiciatis corrupti sit?</p>
</div>
<div class="slide" id="login">
<h1>Login</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ad eveniet eum quisquam earum non
provident facere doloribus neque rerum, asperiores fugiat itaque nemo architecto, excepturi maxime saepe
sed hic?</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Braah+One&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
font-family: 'Braah One', sans-serif;
}
a {
text-decoration: none;
}
.hero-slider, .slide {
position: relative;
display: flex;
height: 100vh;
background: #a1a1a140;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-slider h1, .slide h1 {
font-size: 4.15vw;
letter-spacing: 2.5px;
margin-bottom: 2.5%;
}
.hero-slider p, .slide p {
font-size: 1.75vw;
width: 87.5%;
line-height: 1.5;
opacity: 0.5;
}
.hero-slider-nav {
position: absolute;
display: flex;
bottom: 0;
height: 70px;
width: 100%;
background: #ffffff;
box-shadow: 0 0 20px #00000026;
z-index: 10;
}
.hero-slider-nav-sticky {
position: fixed;
top: 0;
}
.slider-nav-item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
color: #1a1a1a;
font-size: 1.75vw;
letter-spacing: 1.5px;
transition: all 0.25s ease;
}
.slider-nav-item:hover {
background: #007fff80;
color: #ffffff;
transition: all 0.25s ease;
}
.slider-nav-highlight {
position: absolute;
bottom: 0;
height: 6px;
width: 0;
background: #007fff;
transition: left 0.25s ease;
}
.content .slide:nth-child(1), .content .slide:nth-child(5) {
background: #ff696140;
}
.content .slide:nth-child(2), .content .slide:nth-child(4) {
background: #77dd7740;
}
.content .slide:nth-child(3) {
background: #aec6cf80;
}Below is the javascript code for this video.
index.js
function StickyNav() {
this.currentId = null;
this.currentTab = null;
this.tabContainerHeight = 70;
var tabs = document.querySelectorAll(".slider-nav-item"), self = this;
tabs.forEach(tab => tab.addEventListener("click", event => self.onTabClick(event, tab)));
window.addEventListener("scroll", () => self.onScroll());
window.addEventListener("resize", () => self.onResize());
}
StickyNav.prototype.onTabClick = function (event, element) {
event.preventDefault();
var targetId = element.getAttribute("href"), scrollTop = document.querySelector(targetId).offsetTop - this.tabContainerHeight + 1;
window.scrollTo({ top: scrollTop, behavior: "smooth" });
};
StickyNav.prototype.onScroll = function () {
this.checkTabContainerPosition();
this.findCurrentTabSelector();
};
StickyNav.prototype.onResize = function () { if (this.currentId) { this.setSliderStyle(); } };
StickyNav.prototype.checkTabContainerPosition = function () {
var tabContainer = document.querySelector(".hero-slider"), offset = tabContainer.offsetTop + tabContainer.offsetHeight - this.tabContainerHeight;
window.pageYOffset > offset ? document.querySelector(".hero-slider-nav").classList.add("hero-slider-nav-sticky")
: document.querySelector(".hero-slider-nav").classList.remove("hero-slider-nav-sticky");
};
StickyNav.prototype.findCurrentTabSelector = function () {
var newCurrentId = null, newCurrentTab = null, self = this, tabs = document.querySelectorAll(".slider-nav-item");
tabs.forEach(function (tab) {
var id = tab.getAttribute("href"), element = document.querySelector(id), offsetTop = element.offsetTop - self.tabContainerHeight,
offsetBottom = element.offsetTop + element.offsetHeight - self.tabContainerHeight;
if (window.pageYOffset > offsetTop && window.pageYOffset < offsetBottom) {
newCurrentId = id;
newCurrentTab = tab;
}
});
if (this.currentId !== newCurrentId || this.currentId === null) {
this.currentId = newCurrentId;
this.currentTab = newCurrentTab;
this.setSliderStyle();
}
};
StickyNav.prototype.setSliderStyle = function () {
var width = 0, left = 0;
if (this.currentTab) {
width = this.currentTab.offsetWidth;
left = this.currentTab.getBoundingClientRect().left + window.scrollX;
}
document.querySelector(".slider-nav-highlight").style.width = width + "px";
document.querySelector(".slider-nav-highlight").style.left = left + "px";
}
new StickyNav();Thanks for visiting