Scroll Change Elements jQuery
jquery html
### HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Change Elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-container">
<div class="fixed-section">
<h2 id="dynamic-content">Element 1</h2>
</div>
<div class="content">
<div class="scroll-item">Item 1</div>
<div class="scroll-item">Item 2</div>
<div class="scroll-item">Item 3</div>
<div class="scroll-item">Item 4</div>
<div class="scroll-item">Item 5</div>
</div>
</div>
<div class="extra-content">
<h2>Additional Content</h2>
<p>This content appears after the scrolling items.</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>### CSS (styles.css)
body {
font-family: Arial, sans-serif;
}
.scroll-container {
display: flex;
}
.fixed-section {
position: sticky;
top: 0;
width: 200px;
padding: 20px;
background-color: #f0f0f0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content {
margin-left: 20px;
flex-grow: 1;
}
.scroll-item {
height: 100vh; /* Make each item full height to demonstrate scrolling */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
margin-bottom: 10px;
background-color: #e0e0e0;
}
.extra-content {
padding: 20px;
background-color: #fff;
margin-top: 20px;
}### jQuery (script.js)
$(document).ready(function () {
const items = [
"Element 1",
"Element 2",
"Element 3",
"Element 4",
"Element 5"
];
$(window).on('scroll', function () {
const scrollTop = $(this).scrollTop();
const scrollItems = $('.scroll-item');
scrollItems.each(function (index) {
if (scrollTop >= $(this).offset().top - 100) {
$('#dynamic-content').text(items[index]);
}
});
});
});### Explanation
1. **HTML Structure**: The layout consists of a fixed section on the left that displays the dynamic content and a content area on the right containing multiple scroll items.
2. **CSS**:
– The `.fixed-section` uses `position: sticky` to stay in place as you scroll.
– Each `.scroll-item` is set to `100vh` height to allow scrolling.
3. **jQuery**:
– The script listens for scroll events.
– It checks the scroll position and updates the text of the fixed section based on which scroll item is currently in view.
4. **Extra Content**: After the scroll items, additional content can be added that will appear after the scrolling effect.
You can customize the content, styles, and transitions as needed for your project!
Here's an updated implementation:
### HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Content on Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-container">
<div class="fixed-section">
<h2 id="dynamic-content">Element 1</h2>
</div>
<div class="content">
<div class="scroll-item">Item 1</div>
<div class="scroll-item">Item 2</div>
<div class="scroll-item">Item 3</div>
<div class="scroll-item">Item 4</div>
<div class="scroll-item">Item 5</div>
</div>
</div>
<div class="extra-content">
<h2>Additional Content</h2>
<p>This content appears after the scrolling items.</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>### CSS (styles.css)
body {
font-family: Arial, sans-serif;
}
.scroll-container {
display: flex;
}
.fixed-section {
position: sticky;
top: 0;
width: 200px;
padding: 20px;
background-color: #f0f0f0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content {
margin-left: 20px;
flex-grow: 1;
}
.scroll-item {
height: 100vh; /* Make each item full height to demonstrate scrolling */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
margin-bottom: 10px;
background-color: #e0e0e0;
}
.extra-content {
padding: 20px;
background-color: #fff;
margin-top: 20px;
}### jQuery (script.js)
$(document).ready(function () {
const items = [
"Element 1",
"Element 2",
"Element 3",
"Element 4",
"Element 5"
];
const scrollItems = $('.scroll-item');
const contentSection = $('#dynamic-content');
$(window).on('scroll', function () {
const scrollTop = $(this).scrollTop();
let activeIndex = -1;
scrollItems.each(function (index) {
const itemTop = $(this).offset().top;
// Check if the current scroll position is past this item's top offset
if (scrollTop >= itemTop - $(window).height() / 2) {
activeIndex = index; // Update active index if the item is in view
}
});
// Update the content if an active index is found
if (activeIndex !== -1) {
contentSection.text(items[activeIndex]);
}
});
});### Key Changes
1. **Scroll Position Calculation**: The script checks if the scroll position is at least halfway down the viewport of each item. This way, the content changes when the user scrolls to the middle of each scroll item.
2. **Active Index Update**: It keeps track of the last visible item (using `activeIndex`) and updates the content accordingly.
3. **Dynamic Content Change**: The text of the `#dynamic-content` element is updated only when the active index changes.
### How It Works
– As you scroll down the page, the text in the fixed section changes based on which `.scroll-item` is currently in the middle of the viewport.
– Once you scroll past the last item, the scrolling will continue to the extra content below without any disruption.
You can further customize the CSS and HTML as needed to fit your design requirements!