Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 19, 2019 at 10:32 am #1092656
    guttogjente

    I would like to make my sidebar sticky. I have tried several plugins, but they did not work. I see that many people ask for this in former threads at this forum. The closest solution seems to be your reference to https://kriesi.at/support/topic/sticky-sidebar-widget-3/ where it is refereed to https://www.w3schools.com/howto/howto_js_sticky_header.asp I have added the class “sticky” in this tutorial to my child theme’s css file, followed your tutorial for how to create a custom js In the tutorial they apply it to a header class that they define with a certain ID. I want to apply it to all my sidebars, who each contain a navigation menu. I believe I need to replace the line
    var sidebar = document.getElementById("mySidebar");
    In the inspector I see the ID of the navbar, it says “section id=”nav-menu-10”. Can I simply replace “mySidebar” with “nav-menu-10”? But then it will only work for this sidebar and not for all sidebars? I believe many will be happy to get more input on how to manage to set up the sticky sidebar.

    April 21, 2019 at 2:17 am #1092996
    Mike

    Hey guttogjente,
    Sorry for the late reply, please change your code to this:

    var sidebar = document.getElementsByClassName("widget_nav_menu");

    Could you add your whole code here?

    Best regards,
    Mike

    April 23, 2019 at 5:02 am #1093507
    guttogjente

    In the css I have added:

    /* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

    In my_custom.js I have added:

     (function( $ ) {
    "use strict";
 
    $(function() {
 
     // When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the sidebar
var sidebar = document.getElementsByClassName("widget_nav_menu");

// Get the offset position of the navbar
var sticky = sidebar.offsetTop;

// Add the sticky class to the sidebar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    sidebar.classList.add("sticky");
  } else {
    sidebar.classList.remove("sticky");
  }
}
 
    });
 
}(jQuery));

    I tried this code, but it did not seem to work even if I cleared cache.

    April 23, 2019 at 10:42 pm #1093757
    Mike

    Hi,
    I didn’t see your code in the child theme functions.php.
    I added this code instead:

    function custom_script(){
  ?>
  <script>
(function ($) {
  function a() {
    $(window).scroll(function (e) {
      var $sticky = $('#nav_menu-10');
      var position = ($sticky.css('position') == 'fixed');
      if ($(this).scrollTop() > 100 && !position) {
        $sticky.css({ 'position': 'fixed', 'top': '150px', 'width': $sticky.innerWidth() });
        $sticky.next().css('float', 'right');
        $sticky.addClass('fixed_element_style');
      }
      if ($(this).scrollTop() < 100 && position) {
        $sticky.css({ 'position': 'static', 'top': '0px', 'width': '' });
        $sticky.next().css('float', 'left');
        $sticky.removeClass('fixed_element_style');
      }
    });
  }

  a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

    Seems to work good, Please clear your browser cache and check.

    Best regards,
    Mike

    April 27, 2019 at 1:59 am #1094849
    guttogjente

    It works excellent! Thank you for the great job you do at the support, much appreciated! This case can be closed

    April 27, 2019 at 3:56 am #1094862
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Sticky sidebar’ is closed to new replies.