Scroll Based Overlay Slider
This section should stay in place. Change Elements on Scroll. After last element continue with page scroll
### HTML and CSS
1. **Wrap the overlay slider content in a container** that will manage the fixed positioning and provide enough height for scrolling.
2. **Set CSS styles** to maintain the position of the slider during scrolling.
<div class="content-overlayslider">
<div class="heading">
<h2><?php echo __('Wie ein Projekt mit SolarOn läuft', 'solaron'); ?></h2>
</div>
<div class="slider-container">
<div style="border: 1px solid #fff; border-radius: 5px; border-top: none;">
<?php if (!empty($settings['overlayslider_list'])) : ?>
<?php foreach ($settings['overlayslider_list'] as $index => $item) : ?>
<div class="hover-item" data-bg="<?php echo $item['image']['url']; ?>" style="opacity: 1;transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;">
<div class="content <?php echo $index === 0 ? 'active' : ''; ?>">
<span class='order'><?php echo ($index + 1); ?>.</span>
<span class='title'><?php echo $item['title']; ?></span>
</div>
<div class="description <?php echo $index === 0 ? 'active' : ''; ?>">
<?php echo $item['description']; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>### CSS Styles
Add CSS to style the fixed positioning:
.content-overlayslider {
position: relative;
overflow: hidden; /* Hide overflowing content */
}
.slider-container {
position: sticky;
top: 0; /* Stick to the top of the viewport */
height: 100vh; /* Make it full viewport height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}### JavaScript (jQuery Example)
Use jQuery (or plain JavaScript) to change the active content as the user scrolls:
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
var windowHeight = $(window).height();
var items = $('.hover-item');
var lastIndex = items.length - 1;
items.each(function(index) {
var offsetTop = $(this).offset().top;
var height = $(this).outerHeight();
if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
items.removeClass('active');
$(this).addClass('active');
} else if (index === lastIndex && scrollTop >= offsetTop + height) {
// Allow scrolling to continue normally after the last item
items.removeClass('active');
}
});
});### Explanation
– **Sticky Positioning**: The `slider-container` uses `position: sticky` to stay fixed at the top of the viewport as the user scrolls.
– **JavaScript Scroll Event**: The script listens for the scroll event. It checks each item's position relative to the scroll and sets the active class based on the current scroll position.
– **Normal Scrolling**: After the last item, scrolling will continue normally as the condition checks for when the scroll position exceeds the height of the last item.
### Note
Make sure to include jQuery if you’re using it in your project. If you're using plain JavaScript, you can adapt the scroll logic accordingly. This approach provides a smooth experience where the slider contents change based on scroll position without interrupting the overall page flow.