Jquery no conflict not working
<p>This is sort of a two question into one. I'm trying to use the jquery no conflict but I don't think I'm doing it correctly.</p>

<p><strong>This is wat I have:</strong></p>

<blockquote>
  <p>// <strong><em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em></strong> PLUGINS <strong><em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em></strong></p>
</blockquote>

<pre><code>jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`

$(document).ready(function() {
    $(".fancybox").fancybox(); /*LIGHTBOX*/
});

$(window).scroll(function(){ /*SCROLL TO TOP*/
    if ($(this).scrollTop() &gt; 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
}); 

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

$('.bxslider').bxSlider();

});
</code></pre>

<p><strong><p>Am i not doing it right?</p></strong>
*<em><p>Also, when I add this it makes everything stop working which is why I think I'n not adding the no conflict correctly:</p></em>*</p>

<blockquote>
  <p>// <strong><em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em></strong> HEADER SHADOW <strong><em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em>**<em>*</em></strong></p>
</blockquote>

<pre><code>$(window).scroll(function() {
    if ($(this).scrollTop() == 0) {
        $('header').css({
                'box-shadow': 'none',
                '-moz-box-shadow' : 'none',
                '-webkit-box-shadow' : 'none' });
    }
    else {
        $('header').css({
                'box-shadow': '0px 10px 10px #888',
                '-moz-box-shadow' : '0px 10px 10px #888',
                '-webkit-box-shadow' : '0px 10px 10px #888' });
    }
});
</code></pre>

<p>Thank you in advance.</p>
