Magento – How to add sticky (floating) menu in Magento 1.9

You can try rewriting Mage_Catalog_Model_Observer something like below

class Custom_CategoryImage_Model_Observer extends Mage_Catalog_Model_Observer {

    public function addCategoryImages(Varien_Event_Observer $observer) {
        $block = $observer->getEvent()->getBlock();
        $block->addCacheTag(Mage_Catalog_Model_Category::CACHE_TAG);
        $this->_addCategoriesToMenu(
            Mage::helper('catalog/category')->getStoreCategories(), $observer->getMenu(), $block, true
        );
    }

    public function _addCategoriesToMenu($categories, $parentCategoryNode, $menuBlock, $addTags = false) {
        $categoryModel = Mage::getModel('catalog/category');
        foreach ($categories as $category) {
            if (!$category->getIsActive()) {
                continue;
            }

            $nodeId = 'category-node-' . $category->getId();

            $categoryModel->setId($category->getId());
            if ($addTags) {
                $menuBlock->addModelTags($categoryModel);
            }

            $tree = $parentCategoryNode->getTree();
            $categoryData = array(
                'name' => $category->getName(),
                'id' => $nodeId,
                'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
                'is_active' => $this->_isActiveMenuCategory($category),
                'thumbnail' => $categoryModel->load($category->getId())->getThumbnail()
            );
            $categoryNode = new Varien_Data_Tree_Node($categoryData, 'id', $tree, $parentCategoryNode);
            $parentCategoryNode->addChild($categoryNode);

            $flatHelper = Mage::helper('catalog/category_flat');
            if ($flatHelper->isEnabled() && $flatHelper->isBuilt(true)) {
                $subcategories = (array) $category->getChildrenNodes();
            } else {
                $subcategories = $category->getChildren();
            }

            $this->_addCategoriesToMenu($subcategories, $categoryNode, $menuBlock, $addTags);
        }
    }

}

config.xml for your extension will look something like below

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Custom_CategoryImage>
            <version>1.0.0</version>
        </Custom_CategoryImage>
    </modules>
    <global>
        <models>
            <categoryImage>
                <class>Custom_CategoryImage_Model</class>
            </categoryImage>
            <catalog>
                <rewrite>
                    <observer>Custom_CategoryImage_Model_Observer</observer>
                </rewrite>
            </catalog>
        </models>
    </global>
</config>

Modify it according to your need.

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