CODEWITHSUNDEEP
javascriptjquerycss
Xayan123
Xayan123

Reputation: 39

Make second container stick on top right after the first one when scrolling

As you can see here : http://www.shadownet.com.mv/products-2/

The first container sticks on top when scrolled vertically from the container. It should end and the second container "SHADOW SERVER SERIES" should stick on top replacing the first one (bringing the first one to the original position) when it is scrolled vertically from the container.

Right now i use this JS code to make the first one stick but when i use it for the second one, it sticks both on top and doesn't give the intended results : 

var menu = document.querySelector('#sticky')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition) {
    menu.style.position = 'fixed';
    menu.style.top = '42px';
    menu.style.width = '100%';
} else {
    menu.style.position = 'static';
    menu.style.top = '';
}
});

I apologize for my bad english, im not a native speaker.

Upvotes: 0

Views: 147

Answers (2)

Xayan123
Xayan123

Reputation: 39

For this particular one,

I used stickyJS which worked wonderfully and out of the box. I was using a wordpress website. I added the script to header.php and added the JS snippet on desired page, set IDs for the two containers and gave z-index so that they go above each other when in view.

Upvotes: 0

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

If you can use CSS, I would use the menuPosition as state in CSS.

So first the JS function would control state:

var menu = document.querySelector('#sticky'),
    menuPosition = menu.getBoundingClientRect().top;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition){
        document.body.classList.add('scrolled');
    } else {
        document.body.classList.remove('scrolled');
    }
});

I've used classList which has a polyfill. As Obsidian Age pointed out, move the variable menuPosition inside the event controller when it's CSS is dynamic from the top.

Then in CSS, use the body state to control offset for both containers:

#sticky { display: none; position: static; top: 48px; /*...*/ }
#sticky + #sticky2 { display: none;  position: static; width: 100%;/*...*/ }

.scrolled #sticky { display: block; position: fixed; }
.scrolled #sticky + #sticky2 { display: block; position: fixed; }

The + in CSS only works if both containers are direct children of the same parent.

Upvotes: 1

Related Questions