How to craete this type of side bar in wordpress or By Using HTML CSS

Hey there! Creating this type of sidebar in WordPress is actually quite easy. All you need to do is use some HTML, CSS, and a bit of JavaScript. Here's an example of the code you could use:

<div class="sidebar">
  <div class="sidebar-content">
    <!-- Your sidebar content goes here -->
  </div>
</div>

<style>
  .sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: #fff;
    z-index: 999;
  }
</style>

<script>
  window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
      document.querySelector('.sidebar').classList.add('active');
    } else {
      document.querySelector('.sidebar').classList.remove('active');
    }
  });
</script>

And that's it! Now you have a sidebar that will appear when the user scrolls down the page. Good luck!