Basic question: How to add javascript functionality to a page?

Question

I hope this site is friendly to beginner questions.

I would like to add some javascript for sitewide effect. Specifically, I want to make it so that when you scroll down a page, certain elements (e.g. the Category nav, and the Filter bar which I have set horizontally above catalog products) stick to the top and stay visible as you go down the page. Other elements, like the header area where the Logo and search bar sit (in my design), would get covered by these.

For reference, I am looking at this jquery code: http://viget.com/inspire/jquery-stick-em You can see how the author's face "sticks" to the bottom of the header element and stays there as you scroll down. But my question isn't about making this or that particular javascript code work, it's more general.

My question is, where do I place the javascript code to follow the intended use of Magento's design?

Where would I put the javascript if, for example, I just wanted it to affect the product view pages?

Answer 1

Welcome to Magento.SE!

Because this is theme-related, you would place it in the skin/js folder in your theme's path; something like:

[mage-root]/skin/frontend/[yourpackage]/[yourtheme]/js/jquery.waypoints.js

Next you'll need to add some layout xml to shove this into your theme; possibly in your theme's layout/local.xml file; this is how you achieve the 'targeting' you were asking about earlier:

<catalog_product_view>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/jquery.waypoints.js</name></action>
    </reference>
</catalog_product_view>

If you want layout xml for sitewide, change catalog_product_view to default.

I recommend you look into jQuery Waypoints, my personal favorite sticky-header JS that does so much more.