Hi Tung,

You should check for CSS style also. The function will turn the block to position fixed when you scroll below its default position.

On your T3 site, we have

.docs .docs-sidebar .docs-sidenav {
top: 80px;
margin: 0 !important;
padding: 0 !important;
}

It mean, the block will stay at top: 80px.

You also need to check for other style, such as z-index. width, height of the block.

Regards

Hi Mainstwebguy,

If you use the script, you may not need to add the data-spy and data-target and otherwise.

I use exactly code like T3 website:

<script type="text/javascript">

  jQuery(document).ready(function(){

    jQuery('body').scrollspy({'target':'.docs-sidebar'});

    jQuery('.docs-sidenav').affix({offset: {top:230, bottom: function(){ return jQuery('#t3-footer').outerHeight(true) + 40 }}});

  });

  jQuery(window).load(function(){

    jQuery('body').scrollspy('refresh');

  });

</script>

<div class="row">

<div class="span3 docs-sidebar">

<ul class="span3 nav nav-list docs-sidenav">

<li><a href="#overview"> T3 Framework Overview</a></li>

<li><a href="#main-features"> Main Features</a></li>

<li><a href="#developer-network"> Developer Network Update</a></li>

<li><a href="#copy-rights"> Copyright and License</a></li>

<li><a href="#logo-branding"> Branding Logo </a></li>

</ul>

</div>

<div class="span9">

<section id="overview">

<div class="page-header">

<h2>I. About T3 Framework</h2>

</div>

<p>Our T3 framework is the most popular template framework for Joomla. It powers all our T3 based templates and is available for Joomla 1.5, 2.5 and 3.0. For the ease of upgrades the framework is in the plugin format and is installed separately. With over 3 years of active development T3 framework has come a long way and is more roburst, user friendly, feature rich, easy to customize and not to mention the responsive layouts support which not only looks good on all browsers and devices but also works like a charm.</p>

</section>

<section id="main-features">

<div class="page-header">

<h2>II. Main Features</h2>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Responsive </h3></p>

<p>JoomlArt has always been on the forefront on responsive design and our responsive templates, like <a href="http://www.joomlart.com/joomla/templates/ja-wall"><strong>JA Wall</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-elastica"><strong>JA Elastica</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-lens"><strong>JA Lens</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-university"><strong>JA University</strong></a>, <a href="http://www.joomlart.com/joomla/templates/ja-zite"><strong>JA Zite</strong></a>... were a great success among our users. Now it is improved in T3 Framework. </p>

</div>

<div class="span6"><p><h3>Jooml! 2.5 and Joomla! 3.0 Native </h3></p>

<p>T3 framework is native with both Joomla! 2.5 and Joomla! 3.0 -the latest versions of Joomla!.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>MegaMenu</h3></p>

<p>This is a missing feature in Joomla! T3 has powerful Menu system - Mega menu (a feature supported in JA T3v2 already).</p>

</div>

<div class="span6"><p><h3>Integrate Bootstrap</h3></p>

<p>Integrated in full features and components from Bootstrap to standardize your grid, typography, and modules with less efforts.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Utilize LESS CSS</h3></p>

<p>T3 is built in LESS CSS that making CSS development more powerfull and intuitive.</p>

</div>

<div class="span6"><p><h3>HTML5</h3></p>

<p>Stepping stone to ensure your web experience and visualization quality that benefits from rich markup and compatibility.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Multiple Layouts</h3></p>

<p>With multiple layouts supports such as: Left Content Right, Left Content, Right Content, Multiple columns, Full width, you can display your content flexibly.</p>

</div>

<div class="span6"><p><h3>Multiple Themes</h3></p>

<p>4 themes supported by default: default, dark, green, red, you can switch theme easily. You can created unlimited themes and customize them as you expect.</p>

</div>

</div>

<div class="row-fluid">

<div class="span6"><p><h3>Typography</h3></p>

<p>Integrate with Bootstrap then T3 uses typography from Bootstrap with styling for forms, buttons, tables ...</p>

</div>

<div class="span6"><p><h3>ThemeMagic</h3></p>

<p>T3 Framework is powerful by its easy customization with ThemeMagic. You can allow unlimited parameters to be configured in the ThemeMagic. </p>

</div>

</div>

</section>

<section id="developer-network">

<div class="page-header">

<h2>III. Developer Network Update</h2>

</div>

<ul>

<li><strong>Nov 2011:</strong> With the first stable release, JoomlArt officially move monthly template development to T3 </li>

<li><strong>Dec 2012: </strong>A handful independent Joomla developer and group started using T3 as their codebase for custom work: http://pbwebdev.com/, http://www.qubesys.com/, Themeforest.com authors</li>

<li><strong>Jan 2013: </strong>The JoomlaBamboo Club adopted T3 http://www.joomlabamboo.com/blog/template-news/zen-to-the-power-of-t3 </li>

<li><strong>23rd Jan 2013: </strong>Bang2Joom.com team adopts T3 </li>

<li><strong>25th Jan 2013: </strong>ThemeRox adopts T3</li>

</ul>

</section>

<section id="copy-rights">

<div class="page-header">

<h2>IV. Copyright and License</h2>

</div>

<ul>

<li>Copyright (C) 2005 - 2013 T3-Framework.org. All rights reserved.</li>

<li>Distributed under the GNU General Public License version 2 or later.</li>

<li>Speical Thanks to Anthony & JoomlaBammbo team for their continous support & Contribution. </li>

</ul>

</section>

<section id="logo-branding">

<div class="page-header">

<h2>V. Branding Logo </h2>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-dark" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-dark" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-color" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-color" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo t3-logo-light" style="margin-top: 20px;"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo t3-logo-light" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-dark" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-dark" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-color" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-color" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div>

<div class="well" style="background-color: #e5e5e5;">

<div class="row-fluid">

<div class="span4">

<a href="http://t3-framework.org" title="Powered By T3 Framework" target="_blank" class="t3-logo-small t3-logo-light" style="margin-top: 35px; margin-left: 50px"> Powered by <strong>T3 Framework</strong></a>

</div>

<div class="span8" style="margin-bottom: -20px;">

<pre class="prettyprint linenums"><a class="t3-logo-small t3-logo-light" target="_blank" title="Powered By T3 Framework" href="http://t3-framework.org" rel="nofollow">

Powered by<strong>T3 Framework</strong>

</a></pre>

</div>

</div>

</div> 

</section>

<footer id="t3-footer" class="wrap t3-footer">

</footer>

but when i scroll down the menu on left hand is disappear. What is wrong in this code?
and also the menu look very simple not nice like your menu. How can i do it?

Thanks in advance.
Tung

Hi Mainstwebguy,

If you use the script, you may not need to add the data-spy and data-target and otherwise.

Hi Josh,

You can put it anywhere that when the website run, it will output to browser.
As on our demo, we only have 1 article, so we put that block code inside that article.

You can put it beside the navigation markup or any file in /blocks folder.

Regards

I think I'm starting to understand. Can I do this in a custom html module and still have the functionality of the navspy or does the menu with the navspy have to be in the same article to function correctly??

Thanks

I'm also working on implementing this on my site. According to the bootstrap documentation, i need to add the data-spy="affix" to "the element i want to spy on." Do i add this to the menu module and if so, where/how do i add it?

Do i also need to add "data-spy" and "data-target" to the <body> tag?

Hi Josh,

You can put it anywhere that when the website run, it will output to browser.
As on our demo, we only have 1 article, so we put that block code inside that article.

You can put it beside the navigation markup or any file in /blocks folder.

Regards

Sorry, I don't quite follow....

What file and where do I make these changes to?

Thanks

Hi Josh

You should follow the affix document on bootstrap.
http://twitter.github.io/bootstrap/javascript.html#affix

Have you try to add all class and javascript?
For example, on our site:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('body').scrollspy({'target':'.docs-sidebar'});
jQuery('.docs-sidenav').affix({offset: {top:230, bottom: function(){ return jQuery('#t3-footer').outerHeight(true) + 40 }}});
});

jQuery(window).load(function(){
jQuery('body').scrollspy('refresh');
});
</script>

Please try to change those selector that match on your site.

Regards