17.scroll-indicator

Edit this page

<title>Enhanced Scroll Indicator</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

line-height: 1.6;

color: #333;

background-color: #f4f4f4;

}

.top-section {

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 1000;

background-color: #fff;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

padding: 15px 0;

}

.top-section h1 {

text-align: center;

color: #2c3e50;

font-size: 24px;

margin-bottom: 10px;

}

.progress-container {

width: 100%;

height: 5px;

background-color: #ecf0f1;

}

.progress-bar {

height: 100%;

background-color: #3498db;

width: 0%;

transition: width 0.3s ease;

}

.posts-container {

max-width: 800px;

margin: 100px auto 40px;

padding: 0 20px;

}

.post-item-wrapper {

background-color: #fff;

border-radius: 8px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

padding: 20px;

margin-bottom: 20px;

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.post-item-wrapper:hover {

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}

.post-item-wrapper label {

font-size: 18px;

font-weight: bold;

color: #2c3e50;

margin-bottom: 10px;

display: block;

}

.post-item-wrapper p {

color: #34495e;

margin-bottom: 15px;

}

.post-tags {

display: flex;

flex-wrap: wrap;

gap: 5px;

}

.tag {

background-color: #3498db;

color: #fff;

padding: 3px 8px;

border-radius: 15px;

font-size: 12px;

}

@media (max-width: 600px) {

.posts-container {

padding: 0 10px;

}

.post-item-wrapper {

padding: 15px;

}

.post-item-wrapper label {

font-size: 16px;

}

</style>

</head>

<body>

<h1>Enhanced Scroll Indicator</h1>

</div>

const postListContainer = document.querySelector(".posts-container");

const progressBar = document.querySelector(".progress-bar");

async function fetchListOfPosts() {

try {

const response = await fetch("https://dummyjson.com/posts");

const result = await response.json();

displayPostList(result.posts);

} catch (error) {

console.error("Error fetching posts:", error);

postListContainer.innerHTML = "<p>Error loading posts. Please try again later.</p>";

}

function displayPostList(getPosts) {

getPosts.forEach((postItem) => {

const postItemWrapper = document.createElement("div");

postItemWrapper.classList.add("post-item-wrapper");

const postTitle = document.createElement("label");

postTitle.textContent = postItem.title;

const postBody = document.createElement("p");

postBody.textContent = postItem.body;

const postTags = document.createElement("div");

postTags.classList.add("post-tags");

postItem.tags.forEach(tag => {

const tagSpan = document.createElement("span");

tagSpan.classList.add("tag");

tagSpan.textContent = tag;

postTags.appendChild(tagSpan);

});

postItemWrapper.appendChild(postTitle);

postItemWrapper.appendChild(postBody);

postItemWrapper.appendChild(postTags);

postListContainer.appendChild(postItemWrapper);

});

}

function handleScroll() {

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

const scrollPercentage = (scrollTop / scrollHeight) * 100;

progressBar.style.width = `${scrollPercentage}%`;

}

window.addEventListener("scroll", handleScroll);

fetchListOfPosts();

// Lazy loading images (if any)

if ('IntersectionObserver' in window) {

const imgOptions = {

threshold: 0,

rootMargin: "0px 0px 300px 0px"

};

const imgObserver = new IntersectionObserver((entries, imgObserver) => {

entries.forEach(entry => {

if (!entry.isIntersecting) return;

const img = entry.target;

img.src = img.dataset.src;

img.classList.remove("lazy-image");

imgObserver.unobserve(img);

});

}, imgOptions);

document.querySelectorAll('img.lazy-image').forEach(img => imgObserver.observe(img));

}

</script>

</body>

</html>