LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?

Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?

Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?

Many designers are now working on widescreen websites that are even 3x to the visitor screen so sometime, They designed some widget that should be fixed while there visitor scrolling there website horizontally but when he scroll it vertically then the DIV starts scrolling and will be hide to top or bottom.

For this purpose, we wrote a CODE that we are sharing with you below that have more awesome features as you needed. Its short and clean with cross browsers compatibility and can be fully customizable. It can also easily mix up with your own code and can work with any code without conflicting. So without any more preface, here is the live working DEMO URL that can explain you more what we want to desire. After seeing this, check out our features of this code and then garb the code and see its editing below.

Features:

1.) Pure JavaScript Code.
2.) Quick To Load And Easy To Add.
3.) Cross Browser Compatibility.
4.) Desired DIV Will Be Fix While Scrolling X-Axis Only.
5.) Desired DIV Will Start Scrolling While Scrolling Y-Axis Only.
6.) No JQuery Or Any External File.
7.) Short Code.
8.) Work On All Platform, Website, Blogger, WordPress.
9.) No CSS3.
10.) Fully Customizable.

How To Use This Code?

Soo easy to use it. First you have to get the DIV which you want to keep fixed on horizontal scrolling and want to move on vertical scrolling. After getting that DIV, Just change that ID name to “exe_fix_DIV” and the rest of your site data will be in “exe_data_DIV”. Rest you have to add more CSS if you want. Read the below code so you can get it perfectly.

<script type='text/javascript'>
//
// DIV Fixed While Scrolling X-Axis Only
// Code From: www.exeideas.com
// Copyright EXEIdeas. All Right Reserved.
//
window.onscroll = xScroll; function xScroll(){var x = window.pageXOffset;
var y = window.pageYOffset;
if (x){
document.getElementById('exe_fix_DIV').style.position = 'fixed';
}
if (y){
document.getElementById('exe_fix_DIV').style.position = 'relative';
}
}
</script>
<style type='text/css'>
div#wrapper { width:2000px; margin:0; padding:0; }
div#exe_fix_DIV{ height: 50px; background: #ddd; width: 100vw; }
div#exe_data_DIV{ background: #efefef; }
</style>
<div id="wrapper">
<div id="exe_fix_DIV">
This DIV Should Be Fixed When Scroll Horizontally And Will Be Scroll Able When Scroll Vertically.
</div>
<div id="exe_data_DIV">
Your Rest Data Here
</div>
</div>

Customization:

There is nothing more to do. Read the code perfectly and see the text where to change. Just change CSS and HTML, Don’t edit JavaScript and ID’s. If you want to edit more, just contact us so we will edit it more for you.

Recommended For You:
How To Add Simple Pure CSS Vertical Multi-Tabs Widget In Site?

Last Words:

This is what we have and as per our rule, we shared it with you. Now if you liked this then share it with your friends and leave your feedback and if you have any query related to this code, You can contact us freely and we will reply you as fast as we can. Stay with us because we have something more for you in our next post. Have a nice life!

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *