Definitely helped a lot! Thanks, Andrea. I'm very grateful for your wisdom sharing and creativity. Tbh I'm not an expert at code- not even an amateur, just an enthusiast. I don't know if you've experienced the "Tumblr Era" where everyone was having fun with their blogs on Tumblr and messing around with the themes (which actually needed coding) haha! That's where I started to develop an interest in HTML & Java. I just never got to actually focus on it and learn. So I'm here to express my gratitude for sharing your knowledge and the websites/resources to learn these things. Again, awesome video. Hope to see more of you here! Cheers
Thank you so much, Alex! oh, trust me, not an expert either😅 No, I haven't but I heard good things about that era😂 I only started playing around with code in 2021. It's really good knowing some code. Before that I didn't even know the difference between Java and Javascript. You are welcome!!!! New video every week🤓
Is this also possible to get the same effect with full size images instead of background colors? If so, do you have a comparable tutorial or can you tell me how to do this? :) Thanks!
Hey @andreaegli , does the custom css code you find in the page settings appear automatically or do I have to paste it from somewhere? My custom css field is empty when I open it and in your notion file is only the html code.
Hey Pascal! No, the CSS needs to be added too. I don't have it in the Notion file, seems like I forgot to add it or I delete it, who knows. If you want this to work, you will need to follow the video step-by-step I'm afraid. I don't have the code written anywhere anymore so...sorry about that. Just pause the part where I show the CSS code and write it in your site settings > custom CSS.
Love your videos. they are perfect for learning all element or functions! but the link with the code is doesn't work any more? could you reload it? thanks
Thank you so much for the tutorial! Either I am stupid or dont know anything about custom css, but how do I create the Code of the side settings? I would really appreciate a response, I would love to integrate this effect into my website!
hi @marcomigliorino8698, I just watched this video today and you are correct that the code doesn't work on safari , Im new to commenting but have dev experience and I have update the jquery code to suit modern browsers , if it helps you can try the below code in the HTML widget of elementor 1. JavaScript , that only loads on browser load time and if Javascript is not disabled. ```javascript window.addEventListener('scroll', () => { const body = document.body; const panels = document.querySelectorAll('.panel'); // this will select all panels with the class name panel const scrollPosition = window.scrollY + (window.innerHeight / 2); panels.forEach(panel => { const panelTop = panel.offsetTop; const panelBottom = panelTop + panel.offsetHeight; if (scrollPosition >= panelTop && scrollPosition < panelBottom) { // we will then remove existing custom color classes (if any) body.classList.remove(...body.classList); // Spread syntax for efficient removal // we then want to add the color class based on panel's data-color attribute , the one we have set under attribute in elementor based on the above video body.classList.add(`color-${panel.dataset.color}`); } }); }); ``` 2. Custom CSS code if you want don't want to update the site wide css , you can on any one section /container / page under Advanced-->Custom CSS add the code as per video above ```custom-css body { background-color: #f4f4f4; transition: background-colour 1s ease; } .color-copper { background-color: #c1532f !important; } .color-purple { background-color: #6d46f1 !important; } .color-orange { background-color: #f19031 !important; } .color-red { background-color: #93c179 !important; } 3. Attributes data-color| ``` and under Attributes --> Custom Attributes --> for key|value as per the video above you can use ```atributes example data-color|orange ```
![Create a Color Changing Sticky Header Without Code in Elementor [PRO]](/img/1.gif)
Let me know if you found this useful and if it worked for you!
You are the only one that teaches how to do it with Elementor! Thank you so much for sharing this, Andrea! You're awesome!
Thank you so much for your kind words, Fernando! Let me know if you have any requests for future videos🤓
I have been looking for someone that uses JS and custom CSS with Elementor. Please make more of these videos! Loving it! Thank you ❤
Thank you so much, Erika! Will do!💜
Desde hace AÑOS esperaba este tutorial y por fin lo encontré! GRACIAS
You're welcome🤓
Definitely helped a lot! Thanks, Andrea. I'm very grateful for your wisdom sharing and creativity. Tbh I'm not an expert at code- not even an amateur, just an enthusiast. I don't know if you've experienced the "Tumblr Era" where everyone was having fun with their blogs on Tumblr and messing around with the themes (which actually needed coding) haha! That's where I started to develop an interest in HTML & Java. I just never got to actually focus on it and learn. So I'm here to express my gratitude for sharing your knowledge and the websites/resources to learn these things.
Again, awesome video. Hope to see more of you here! Cheers
Thank you so much, Alex! oh, trust me, not an expert either😅 No, I haven't but I heard good things about that era😂 I only started playing around with code in 2021. It's really good knowing some code. Before that I didn't even know the difference between Java and Javascript. You are welcome!!!!
New video every week🤓
Is this also possible to get the same effect with full size images instead of background colors? If so, do you have a comparable tutorial or can you tell me how to do this? :) Thanks!
Thank god I found you!!!!!!!!!!!!!
Black to white conversion or White to black conversion? Could show us ?
but i see only one code where the other cods ?
This was so cool 👌 imaging is we could create a gradual gradient change on scroll 😱😱😱
Hey @andreaegli , does the custom css code you find in the page settings appear automatically or do I have to paste it from somewhere? My custom css field is empty when I open it and in your notion file is only the html code.
Hey Pascal! No, the CSS needs to be added too. I don't have it in the Notion file, seems like I forgot to add it or I delete it, who knows. If you want this to work, you will need to follow the video step-by-step I'm afraid. I don't have the code written anywhere anymore so...sorry about that. Just pause the part where I show the CSS code and write it in your site settings > custom CSS.
I have some problems, i can try the tutorial and follow all steps but not work when i try.
Please make more this type videos
Could you be more specific, what type exactly?
Thanks it works, however, the colour transition is sharp. How can I ensure its a smooth transition, any ideas?
It works! Can this be done with images?
🤓 no idea, I’ve never thought of trying this with images but it should work
It doesn't work on mobile and didn't show up on any other browser except for the one I am logged in from
Love your videos. they are perfect for learning all element or functions! but the link with the code is doesn't work any more? could you reload it? thanks
thank you! check again, Notion had some issues today
@@andreaegli thank you so much! is back online and everything is working! love it!
Can we do this for single sticky section color change according to other sections colors or behalf of their id?
Thank you so much for the tutorial! Either I am stupid or dont know anything about custom css, but how do I create the Code of the side settings? I would really appreciate a response, I would love to integrate this effect into my website!
Hi Andrea, is this code compatible with Safari? not working for me :/
Hi Andrea, the function does not work for me on mobile and tablet. works as should on desktop. do you have any idea why this could be??
Another challenge: change the color of fixed text on vertical scroll according to sections…
Ciao from Italy :) this code dont work on safari :(
hi @marcomigliorino8698,
I just watched this video today and you are correct that the code doesn't work on safari , Im new to commenting but have dev experience and I have update the jquery code to suit modern browsers , if it helps you can try the below code in the HTML widget of elementor
1. JavaScript , that only loads on browser load time and if Javascript is not disabled.
```javascript
window.addEventListener('scroll', () => {
const body = document.body;
const panels = document.querySelectorAll('.panel'); // this will select all panels with the class name panel
const scrollPosition = window.scrollY + (window.innerHeight / 2);
panels.forEach(panel => {
const panelTop = panel.offsetTop;
const panelBottom = panelTop + panel.offsetHeight;
if (scrollPosition >= panelTop && scrollPosition < panelBottom) {
// we will then remove existing custom color classes (if any)
body.classList.remove(...body.classList); // Spread syntax for efficient removal
// we then want to add the color class based on panel's data-color attribute , the one we have set under attribute in elementor based on the above video
body.classList.add(`color-${panel.dataset.color}`);
}
});
});
```
2. Custom CSS code
if you want don't want to update the site wide css , you can on any one section /container / page under Advanced-->Custom CSS add the code as per video above
```custom-css
body {
background-color: #f4f4f4;
transition: background-colour 1s ease;
}
.color-copper {
background-color: #c1532f !important;
}
.color-purple {
background-color: #6d46f1 !important;
}
.color-orange {
background-color: #f19031 !important;
}
.color-red {
background-color: #93c179 !important;
}
3. Attributes data-color|
```
and under Attributes --> Custom Attributes --> for key|value as per the video above you can use
```atributes example
data-color|orange
```