In the non-responsive WordPress themes, it's easy to stick a div element outside the sidebar as you scroll.
If the width of the page is 1,000px, you can try the following CSS code:
position: fixed; top: 0; left: 50%; margin-left: 505px; /* (The width of the page) / 2 + (space between the page border and the fixed element) */ margin-top: 225px; z-index: 100;
The value of "margin-top" indicates the distance from the top of the page. The value of "margin-left" is how far the element is to the right from the center of the page.
When it comes to the responsive WordPress themes, the CSS code above does not work. I added "transform property" to the above CSS code snippet to make a div fixed outside the theme.
position: fixed; top: 5px; left: 50%; transform: translateX(1000%); /* Added this line */ margin-left: 50px; /* determines the position of the element horizontally */
The value of "margin-left" needs to be adjusted depending on the theme you are currently using. I tested the above code in the TwentyTwelve theme and this theme, and it worked well.
Using this CSS code, you can fix any elements such as menu navigations and banners outside the WordPress theme without using a plugin.