DO you want to know how amazon uses topic switch while scrolling?
I will share html code to do this:
here is it:
<html>
<head>
<style>
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the main content */
.main {
margin-left: 160px; /* Same as the width of the sidenav */
}
/* Style the side navigation menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidenav */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #eee; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display:none
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A website that switches post topics while scrolling like Amazon.</p>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="sidenav">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#section4">Section 4</a>
</div>
<div class="main">
<h2>Section 1</h2>
<p>Some content for section one.</p>
<h2 id="section2">Section 2</h2>
<p>Some content for section two.</p>
<h2 id="section3">Section 3</h2>
<p>Some content for section three.</p>
<h2 id="section4">Section 4</h2>
<p>Some content for section four.</p>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
// Get all the links in the side navigation menu
var links = document.querySelectorAll(".sidenav a");
// Get all the sections in the main content
var sections = document.querySelectorAll(".main h2");
// Add an event listener to each link
links.forEach(function(link) {
link.addEventListener("click", function(e) {
// Prevent the default behavior of scrolling to the anchor
e.preventDefault();
// Get the target section id from the link's href attribute
var targetId = link.getAttribute("href").slice(1);
// Find the corresponding section element by id
var targetSection = document.getElementById(targetId);
// Scroll to the section element
targetSection.scrollIntoView({behavior:"smooth"});
});
});
// Add an event listener to the window scroll event
window.addEventListener("scroll", function() {
// Get the current scroll position
var scrollPosition = window.pageYOffset;
// Loop through each section
sections.forEach(function(section) {
// Get the section's id
var sectionId = section.getAttribute("id");
// Get the corresponding link element by id
var link = document.querySelector(".sidenav a[href='#" + sectionId + "']");
// Get the section's position relative to the viewport
var rect = section.getBoundingClientRect();
// Check if the section is in the viewport
if (rect.top >= -rect.height && rect.top <= rect.height) {
// Add an active class to the link element
link.classList.add("active");
} else {
// Remove the active class from the link element
link.classList.remove("active");
}
});
});
</script>
</div>
</body>
</html>
