[Resolved] Move sidebar on scroll

[Dominik]

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

[David]

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>

[Dominik]

Hi David!

Thanks – works well 🙂

Best regards

[David]

Thats pretty cool 🙂 Glad to be of help

[Dominik]

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 😀

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>

[David]

Can’t see why it wouldn’t work – any errors showing in the console?

[Dominik]

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

[David]

Nice find – and thanks for sharing 🙂

[Author]

Posts