Several adhesive panels on a dynamic webpage

Question

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the previous one away, becoming sticky itself. Below is the HTML structure:

<div class="container">
    <div class="row">
        <div class="col-md-4 sticky">
            <h2>Example</h2>
            <p class="page-side-block">...</p>
            <a href="#" class="action-button">...</a>
        </div>
        <div class="col-md-8 col-md-offset-4">
            <p>...</p>
        </div>
    </div>
    ...

I've managed to make the first block sticky, but I'm unsure how to achieve the desired functionality for subsequent blocks. Any assistance would be appreciated.

Below is the JavaScript code (using mootools) that I am currently using. Please note that it may not work with the provided HTML markup, as I have made adjustments for clarity:

window.onscroll = function() {
    var stickyBlock = $('sticky-block');
    if (window.getScroll().y > 235) {
        stickyBlock.setStyles({
            position: 'fixed',
            top: '100px',
            width: "350px"
        });
    } else if (window.getScroll().y < 235) {
       stickyBlock.setStyles({
            position: 'absolute',
            top: 0,
            width: null
       });
    }
}

It's worth noting that the new w3c specs have introduced a position: sticky; property, which could eliminate the need for JavaScript in this scenario. Unfortunately, browser support for this feature is currently limited, as indicated here.

If anyone has insight on resolving this issue, I would greatly appreciate your input. Thank you!

javascript html css mootools sticky

Answer 1

Answer №1

It's a bit late at night here, but I wanted to share a suggestion with you.

If you track all positions and listen for scroll events, you can compare the initial positions with the scroll position and fix elements as needed.

In my example, I utilize the .pin() method from MooTools More, so as not to reinvent the wheel.

Example: http://jsfiddle.net/2AZ28/

Here is some MooTools code:

var stickyBlock = $$('.sticky').map(function(el){
    return {
        elem: el,
        initialPos: el.getPosition().y,
        height: el.getHeight()
    };
});
window.addEvent('scroll', function(){
    var currentScrollPos = window.getScroll().y;
    stickyBlock.each(function (el, index) {
        if (el.initialPos <= currentScrollPos){
            el.elem.pin();
            if (stickyBlock[index + 1] && (stickyBlock[index + 1].initialPos - el.height <= currentScrollPos)) el.elem.setStyle('top', stickyBlock[index + 1].initialPos - el.height - currentScrollPos);
        } else {
            el.elem.unpin();
        }
    });
})

There might be room for further optimization, but I hope this aids in addressing your query.

Answer 2

It's a bit late at night here, but I wanted to share a suggestion with you.

If you track all positions and listen for scroll events, you can compare the initial positions with the scroll position and fix elements as needed.

In my example, I utilize the .pin() method from MooTools More, so as not to reinvent the wheel.

Example: http://jsfiddle.net/2AZ28/

Here is some MooTools code:

var stickyBlock = $$('.sticky').map(function(el){
    return {
        elem: el,
        initialPos: el.getPosition().y,
        height: el.getHeight()
    };
});
window.addEvent('scroll', function(){
    var currentScrollPos = window.getScroll().y;
    stickyBlock.each(function (el, index) {
        if (el.initialPos <= currentScrollPos){
            el.elem.pin();
            if (stickyBlock[index + 1] && (stickyBlock[index + 1].initialPos - el.height <= currentScrollPos)) el.elem.setStyle('top', stickyBlock[index + 1].initialPos - el.height - currentScrollPos);
        } else {
            el.elem.unpin();
        }
    });
})

There might be room for further optimization, but I hope this aids in addressing your query.

Several adhesive panels on a dynamic webpage

Answer №1

Example: http://jsfiddle.net/2AZ28/

Similar questions

Can I use my local network/browser to download an html file from a webpage as if I manually downloaded it using javascript or nodejs?

Ways to connect css file to ejs views in nodejs

What steps can be taken to confirm the accuracy of input before sending it

The use of an Authorization header is not compatible with HTTP GET requests

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Storing information in Firebase using React.js

Create a Boostrap navbar with a form and links aligned to the right using the navbar

What is the best way to create a self-referencing <div> in HTML?

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`

Error: The property 'language' is undefined and cannot be read

What could be the reason for the navigation bar menu items not showing up in the sample application of the twitter.bootstrap.mvc4 package?

Retrieving a specific variable from a cookie value that is stored within a JSON array

The clash between Angular's ng-if directive and Bootstrap's popover feature causing unexpected

Express.js - Monitoring for server closure

combine blank cells in table generated with vuejs

After updating the state, the Next.js axios call experiences a delay before executing the desired action

Constructing a horizontal slider using vertically floating divs

Employing a function to concatenate promises

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible