Magento – How to Create a Responsive Sticky Header

I am trying to create a sticky header on Magento using scripts and I was successful in implementing it. I want to create sticky header only for full size window (desktop view) and it should not affect when we decrease the size of window (mobile view) that is the header should not stick in mobile view, but in my case the header sticks for both the views as shown in snapshots hence it looks inappropriate

here is my style.css

#ja-mainnav
{
position:fixed;
width:100%;
top: 30px;
  z-index: 10000;
}

javascript:

<script type="text/javascript">
var m1 = 30; /*header height in pixels */
var m2 = 0; /* Indent when during scrolling header* no longer visible */
var menuID = "ja-mainnav";
/* id menu */
var menuOpacityOnChange = "1";

var menuOpacityOnChangeIE = menuOpacityOnChange * 100;

function getScrollTop() {
    var scrOfY = 0;
    if( typeof( window.pageYOffset ) == "number" ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
    } else if( document.body
    && ( document.body.scrollLeft
    || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
    } else if( document.documentElement
    && ( document.documentElement.scrollLeft
    || document.documentElement.scrollTop ) ) {
        //IE6 Strict
        scrOfY = document.documentElement.scrollTop;
    }
    return scrOfY;
}

function marginMenuTop() {
    var top  = getScrollTop();
    var s    = document.getElementById(menuID);

    if(typeof s != "undefined" && s){
        if (top+m2 < m1) {
            s.style.top       = (m1-top) + "px";
            s.style.filter    = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")","");
            s.style.opacity   = "1";

        } else {
            s.style.top       = m2 + "px";
            s.style.opacity   = menuOpacityOnChange;
            s.style.filter    = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")","");
            s.style.filter    += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")";
        }
    }
}

function setMenuPosition(){
    if(typeof window.addEventListener != "undefined"){
        window.addEventListener("scroll", marginMenuTop, false);
    } else if(typeof window.attachEvent != "undefined"){
        window. attachEvent("onscroll", marginMenuTop);
    }
}

if(typeof window.addEventListener != "undefined"){
    window.addEventListener("load", setMenuPosition, false);
} else if(typeof window.attachEvent != "undefined"){
    window. attachEvent("onload", setMenuPosition);
}

[