Question

I have dropdown menus that look like this:

However, I wanted a div element to stick the top of a page at a certain scroll range, so I added this code in the head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).scroll(function(e){
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 1437 && $el.css('position') != 'fixed'){
        $('.fixedElement').css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 1437 && $el.css('position') != 'absolute'){
        $('.fixedElement').css({'position': 'absolute', 'top': '1437px'});
    }
});
// ]]>
</script>

.fixedElement is defined in my CSS file, and then referenced with

<div class="fixedElement">

Now, my dropdown menus look like this:

When I comment out the new javascript, the menus go back to normal.

Any ideas on how to make my new javascript work with my dropdown menus?

Thanks!

EDIT:

One console error pertaining to the dropdown javascript is:

Uncaught TypeError: Object #<Object> has no method 'getElements'

That is referencing this line:

var links = $(this.options.id).getElements('a');

In this javascript: MenuMatic

When I comment out the new javascript the error disappears and my menus come back!

Answer 1

Got it.

My dropdown javascript was using the MooTools library, while my sticky div was using jQuery.

jQuery uses “$” as a shortcut for “jQuery”, so the line

var links = $(this.options.id).getElements('a');

referencing javascript from the MooTools library throws an error because jQuery has overwritten the definition for “$”

This conflict is solved by inserting

jQuery.noConflict();

before my jQuery script and replacing all of the “$” in my jQuery script with “jQuery”

More info here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

See also:

jQuery and other libraries, and the usage of '$'

What is the meaning of symbol $ in jQuery?