Why does my JS code act so intermittently?
<p>The JS code below is meant to get the height of the browser and the height of the .banner div. If the banner height is greater than the browser height, append two divs (.title and .social) to the body otherwise don't do anything and leave .title and .social divs where they are.</p>

<p>I'm also wanting the .title and .social divs to fade out when a user scrolls down the page and fade in when they get back to the top of the page. </p>

<p><strong>The problem</strong></p>

<p>This code does work but not all the time. Sometimes it will display correctly other times it won't. By that I mean the height of div.banner can be greater than the height of the browser window yet .title and .social will not be appended to the body. Is there anything wrong with this code that could cause this issue to occur?</p>

<pre><code>$(document).ready(function () {

// fade in/fade out banner titles
$(window).trigger('scroll');

var divs = $('.social, div.banner .title'); 
$(window).scroll(function(){
   if($(window).scrollTop() &lt; 10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});

// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height

if (bannerHeight &gt; windowHeight) {
    $("body").append($('.banner .title'));
    $("body").append($('.social'));

}
else {
    //Display .title and .social in .banner div (as originally in HTML)
}
});
</code></pre>

<p>My HTML code that is on page load for reference:</p>

<pre><code>&lt;div class="banner y1"&gt;

    &lt;div class="title" id="feature-title"&gt;
        &lt;!-- title content here --&gt;
    &lt;/div&gt;

    &lt;div class="social" id="feature-social"&gt;

        &lt;!-- social content here --&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
