[Resolved] Move sidebar on scroll

Home Forums Support Move sidebar on scroll

  • This topic has 7 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1127561
    Manuel

    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

    #1127713
    David
    Staff
    Customer Support

    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>
    #1127998
    Manuel

    Hi David!

    Thanks – works well 🙂

    Best regards

    #1128002
    David
    Staff
    Customer Support

    Thats pretty cool 🙂 Glad to be of help

    #1145389
    Manuel

    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>
    
    
    #1145813
    David
    Staff
    Customer Support

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

    #1149031
    Manuel

    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

    #1149161
    David
    Staff
    Customer Support

    Nice find – and thanks for sharing 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.