5

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);
}

[image

1

Have you tried just have the position: fixed; for large screens and then use position: relative; for the smaller screens using media queries in your css.

e.g.

#ja-mainnav{position: fixed; ....}
/*Example media query*/
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
   #ja-mainnav{position: relative;}
}

add other media queries to suit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.