Archived topic
Move sidebar on scroll
7 replies · Started by Dominik on January 10, 2020
Hi there,
I have made the sidebar sticky and want to move it on scroll.
So the sidebar is overlay to the hero section and if the user scrolls, it moves to its "normal position".
Perfect would be, if the move is animated (fluent or something).
My css:
@media (min-width: 769px) {
#right-sidebar
{
position: -webkit-sticky;
position: sticky;
top: 0;
margin-top:20px;
margin-left:-30px;
}
.sidebar-move{margin-left:0px !important;color:red !important;}}
In the elements i added a hook to wp_footer:
<script>
if ($(window).scrollTop() > 100){
$('right-sidebar').addClass("sidebar-move");
}
else {
$('right-sidebar').removeClass("sidebar-move");
}
</script>
At the moment, nothing is changing on scroll? Can you find my mistakes?
Thanks for your support!
Dominik
Hi there,
WordPress jQuery doesn't recognise the $ unless it is declared within the function. So you would need to replace $ with jQuery
Alternatively you could use this vanilla Javascript to add / remove the class on scroll:
<script>
const sidebar = document.getElementById('right-sidebar');
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop;
// If scroll value is more than 100 - add class
if (scroll > 100) {
sidebar.classList.add("sidebar-move");
} else {
sidebar.classList.remove("sidebar-move");
}
}
window.addEventListener('scroll', onScroll);
</script>Hi David!
Thanks – works well :)
Best regards
Thats pretty cool :) Glad to be of help
Hi David,
everything worked well, until I tested it in Internet Explorer 11 and Edge.
Unfortunately there are still some guys using this horrible browsers :D
Can you please help?
Thanks in advance and kind regards
Dominik
<script>
const sidebar = document.getElementById('right-sidebar');
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop;
const scrollbot = document.documentElement.scrollBottom;
// If scroll value is more than 100 - add class
if (scroll > 5 && scroll < 1400) {
document.getElementById("right-sidebar").style.cssText = "margin: 30px 0px 0px 0px; width: 30%; max-height:95vh; overflow-y:scroll" ;
document.getElementById("right-sidebar").style.transition = "all 0.5s";
document.getElementById("wpforms-widget-3").style.cssText = "box-shadow: none; border-radius: 0px;";
document.getElementById("wpforms-widget-3").style.transition = "all 0.5s;";
}
else if(scroll > 1400){
document.getElementById("right-sidebar").style.cssText = "margin: 0px 0px 0px 0px; width: 70%;";
document.getElementById("right-sidebar").style.transition = "all 0.5s";
document.getElementById("wpforms-widget-3").style.cssText = "box-shadow: none; border-radius: 0px; padding:0px 40px 120px 40px;";
document.getElementById("wpforms-widget-3").style.transition = "all 0.5s";
}
else
{
document.getElementById("right-sidebar").style.cssText = "margin: 30px 0px 0px -150px; width: 42%;";
document.getElementById("right-sidebar").style.transition = "all 0.1s";
document.getElementById("wpforms-widget-3").style.cssText = "box-shadow: 2px 2px 6px rgba(0,0,0,0.3); border-radius: 10px;";
document.getElementById("wpforms-widget-3").style.transition = "all 0.5s";
}
}
window.addEventListener('scroll', onScroll);
</script>
Can't see why it wouldn't work - any errors showing in the console?
No errors...but I have that feeling that document.documentElement.scrollTop; is the problem in IE.
I found a unbureaucratic solution and made a individual code for IE users...
/*Wenn Edge dann*/
var ua = window.navigator.userAgent;
var edge = ua.indexOf('Edge/');
if (edge > 0) {
document.getElementById("hero-text-1").style.cssText = "opacity: 1 !important;";
document.getElementById("hero-text-2").style.cssText = "opacity: 1 !important;" ;
}
/*Wenn nicht Edge dann*/
else{
function isIE() {
ua = navigator.userAgent;
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
return is_ie;
}
if (isIE()){
document.getElementById("hero-text-1").style.cssText = "opacity: 1 !important;";
document.getElementById("hero-text-2").style.cssText = "opacity: 1 !important;" ;
}else{
document.getElementById("hero-text-1").style.cssText = "opacity: 0 !important;";
document.getElementById("hero-text-2").style.cssText = "opacity: 0 !important;" ;
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop;
// If scroll value is more than 100 - add class
if (scroll < 5) {
document.getElementById("hero-text-1").style.cssText = "opacity: 0 !important;";
document.getElementById("hero-text-2").style.cssText = "opacity: 0 !important;" ;
}
else
{
document.getElementById("hero-text-1").style.cssText = "opacity: 1 !important;";
document.getElementById("hero-text-1").style.transition = "all 1s";
}
if (scroll < 120) {
document.getElementById("hero-text-2").style.cssText = "opacity: 0 !important;" ;
document.getElementById("hero-text-2").style.transition = "all 2s";
}
else
{
document.getElementById("hero-text-2").style.cssText = "opacity: 1 !important;" ;
document.getElementById("hero-text-2").style.transition = "all 2s";
}
}
window.addEventListener('scroll', onScroll);
}
}
</script>This works well for me
Nice find - and thanks for sharing :)
