X-Cart forums

[totaltec]

I personally think stickUp, is overkill. I can achieve the same effect with 5-6 lines of jQuery code. If you are looking for an example see http://xcartnext.com

/*
 *  Floating Menu
 */

var $menu = $('#main-wrapper');
    menuOffsetTop = $menu.offset().top;
    
$(document).bind('ready scroll', function () {
    var docScroll = $(this).scrollTop();

    if (docScroll >= menuOffsetTop - 65) {
        $('#page').addClass('fixed_menu');
    } else {
        $('#page').removeClass('fixed_menu');
    }
});

[anandat]

Originally Posted by totaltec

I personally think stickUp, is overkill. I can achieve the same effect with 5-6 lines of jQuery code. If you are looking for an example see http://xcartnext.com

/*
 *  Floating Menu
 */

var $menu = $('#main-wrapper');
    menuOffsetTop = $menu.offset().top;
    
$(document).bind('ready scroll', function () {
    var docScroll = $(this).scrollTop();

    if (docScroll >= menuOffsetTop - 65) {
        $('#page').addClass('fixed_menu');
    } else {
        $('#page').removeClass('fixed_menu');
    }
});

Thanks Mike
Can you please tell me in which file I need to add above code to achieve StickUp for Xmenu?

[xtech]

Thank you mike.Please let me where to add this code in order to achieve that?

[totaltec]

I don't have Xmenus, so it is hard for me to answer, but I will better explain my code above. Your implementation will be different depending on the names of your container classes and your existing CSS styles.

The basic necessity for a fixed or "sticky" menu is the CSS style position fixed.

For instance, consider this code:

div.menu {
  position: relative;
}

.fixed_menu div.menu {
  position: fixed;
  z-index: 9999;
}

So as you see in my JavaScript above, I am assigning a variable to the container element of the menu, the recording it's offset from the top of the page. Next I bind a function to the scroll event. If the scroll level is greater than the defined offset, I add a class of "fixed_menu" to the containing page element. This allows me to write any CSS I want for the menu itself. When I want it to be "sticky", I can use ".fixed_menu" in my CSS hierarchy. Usually besides styling the menu to be wider and fixed, I also like to assign an opacity level so it is partially translucent. Then I take away the translucent effect on hover.

[jo_Z13]

I have xMenus on my site - can someone tell me how I can center the menu at the top of the page? It's currently sitting to the left.

[suehamil]

Hi Josie
Not sure if this is the right way but I did get it to work by enclosing the xpos in a div and giving it an id then adding this css to the theme css file

<div id="ptpromo">{$xmr_pos_2}</div>

then in skin/common_files/modules/TXS_XMenus_R/Menu theme/themeVariant.css

#ptpromo ul{
width:100%;
margin:0 auto;
text-align:center;
}
#ptpromo ul li a span{
color:#014d90;
}

However in the latest version of the site it's not working.

here it is working (The white menu with the same day dispatch etc)
http://www.poshtights.com/PTnew/home.php?shopkey=singap


Hope that's some help
Sue