Menu with scroll event, same Sugite or Appolio, here.

Create a block header-p and put this:

<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

// get params
$sitename = $this->params->get('sitename');
$slogan = $this->params->get('slogan', '');
$logotype = $this->params->get('logotype', 'text');
$logoimage = $logotype == 'image' ? $this->params->get('logoimage', T3Path::getUrl('images/logo.png', '', true)) : '';
$logoimgsm = ($logotype == 'image' && $this->params->get('enable_logoimage_sm', 0)) ? $this->params->get('logoimage_sm', T3Path::getUrl('images/logo-sm.png', '', true)) : false;

if (!$sitename) {
$sitename = JFactory::getConfig()->get('sitename');
}

$logosize = 'col-sm-3';
if ($headright = $this->countModules('head-search or languageswitcherload')) {
$logosize = 'col-sm-3';
}

?>


<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">
<div class="container">


<div class="col-md-3 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype, ($logoimgsm ? ' logo-control' : '') ?>">
<a href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="/<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class="logo-img-sm" src="/<?php echo JURI::base(true) . '/' . $logoimgsm ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>



<div class="navbar-header">

<?php if ($this->getParam('navigation_collapse_enable', 1) && $this->getParam('responsive', 1)) : ?>
<?php $this->addScript(T3_URL.'/js/nav-collapse.js'); ?>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".t3-navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<?php endif ?>

<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
<?php $this->loadBlock ('off-canvas') ?>
<?php endif ?>

</div>

<?php if ($this->getParam('navigation_collapse_enable')) : ?>
<div class="t3-navbar-collapse navbar-collapse collapse"></div>
<?php endif ?>

<div class="t3-navbar navbar-collapse collapse">
<jdoc:include type="<?php echo $this->getParam('navigation_type', 'megamenu') ?>" name="<?php echo $this->getParam('mm_type', 'mainmenu') ?>" />
</div>

</div>
</nav>


//==============================================================================//

custom.css put this:

.t3-mainnav {
width: 100%;
position:fixed;
top:0;
left:0;
transition: top .2s ease-in;
z-index:9999;
}

.js-t3-mainnav-scrolling {
top: -4em; /* Height of the header */
}

@media (max-width:767px) {
.t3-mainnav {
position:fixed;
}
.js-t3-mainnav-scrolling {
top: 0px;
}
}

//==============================================================================//

put between <head> and </head>.

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
//Requires JQuery or Zepto
$(document).ready(function(){

// Cache header
var $header = $('.t3-mainnav');

// Get height of t3-mainnav to use later as starting point
var $hHeight = $header.height();

// Set initial position to current position on page
var prevTop = $(window).scrollTop();

// Scroll event
$(window).on('scroll', function(e) {
st = $(this).scrollTop(); // Set scroll location
if (st > prevTop && st > $hHeight) {
$header.addClass('js-t3-mainnav-scrolling');
} else {
$header.removeClass('js-t3-mainnav-scrolling');
}
prevTop = st;
});

});
</script>

</head>
//==============================================================================//

Base http://codepen.io/markmichon/pen/yicGB

We moved to new unified forum!

T3 Community Discussion & Support

Resolved Menu with scroll event, same Sugite or Appolio, here.