How to properly add Javascript?!? --- HELP!

I have a bunch of custom javascript/jQuery added to the "add HTML/CSS" inserts but there is a problem...

I can't use any plug-ins that use javascript because they conflict with the current code I have!

I know that my main problem is calling the javascript/jQuery correctly, I just have no idea on how to call the jQuery that is already included with wordpress that way there are no conflicts of calling jQuery a bunch of times.

This is my site (that i have to finish for school next week!), the custom stuff is a pop up footer, a navigation that sticks to the top, and a little animated line under the navigation links... titosoto.com

Here is the code that I added to the "Header";

<! This is the DIV stick to the top !>

<script type="text/javascript">
jQuery(function($) {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
}
});
});
</script>




<! THIS IS THE SLIDE UP FOOTER !>

<script type="text/javascript">
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
</script>





<! THIS IS THE ANIMATED NAVIGATION UNDERLINE BAR !>

<script type="text/javascript">
jQuery(function($) {

var $el, leftPos, newWidth;
$mainNav2 = $("#example-two");

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");

/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();

$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});


});

</script>


So, anyone know hoy my code would look like to stop all this javascript/jQuery conflict?!


all plug-ins work but then none of my custom stuff works... NOTE im not a programmer AT ALL, im a graphic design student.