How to create static sidebar on wordpress website

Question

I'm junior web designer and currently working on wordpress based website (modifying theme for local house clearance company).

The owners of the website want the sidebar to be fixed, so even when the user scroll down the page, the right sidebar (Our Services Menu) will always stay above the fold.

I tried so many CSS solutions but nothing works. Please have a look at the page in question.

I will be very grateful if you help me to fix this sidebar, because I'm desperate.

Answer 1

1. Ok friend you need to open your functions.php in your theme

2. Somewhere in your functions.php find wp_enqueue_script('somename') there will be probably more than one of these and 'somename' is just an example and it will probably look something like this wp_enqueue_script( 'some-boring-name', get_template_directory_uri() . '/js/some-boring-name.js', array( 'jquery' ), '1.0', true' );

3. After all of these add your own script like so wp_enqueue_script('do-fixed-sidebar' get_template_directory_uri() . '/js/do-fixed-sidebar', array('jquery'), '1.0', true );

4. It should look like this:

   wp_enqueue_script( 'some-boring-name', get_template_directory_uri() . 'some-boring-name.js', array( 'jquery' ), '1.0' );
   wp_enqueue_script( 'some-boring-name2', get_template_directory_uri() . 'some-boring-name2.js', array( 'jquery' ), '1.0' );
   wp_enqueue_script( 'do-fixed-sidebar', get_template_directory_uri() . '/js/do-fixed-sidebar.js', array( 'jquery' ), '1.0' );<--this will be your included do-fixed-sidebar.js file-->
   

5. You see /js/do-fixed-sidebar.js part in wp_enqueue_script()?

It means that you NEED to create an empty folder called js in your theme (if your theme does not have it)

6. To be on the safe side now your theme FOLDER structure should look like this (this is obviusly just an example):

   • index.php
   • style.css
   • single.php
   • author.php
   • all-other-files.php
   • js <--this your empty folder -->

7. Open text editor and create a new file and call it do-fixed-sidebar.js

8. Add following code to your do-fixed-sidebar.js and save it.

   $(document).ready(function(){
   
   var stickySidebar = $('.wpb_content_element').offset().top;
   
   $(window).scroll(function() {  
    if ($(window).scrollTop() > stickySidebar) {
       $('.wpb_content_element').addClass('fixed');
    }
    else {
        $('.wpb_content_element').removeClass('fixed');
    }  
    });
   
    });
   

9. Upload this file to your js folder in your theme.

10. We are NOT done yet... Find style.css in your theme and add this code:

    .fixed{
    position:fixed;
    top:0;
    right:0;<--this will probably need some adjusting maybe 45px...-->
    overflow-y:scroll;
    height:100%;
    }
    

    11. Whoa you are done!! :)