two jquery scroll functions and an embedded background video - possible conflict

Question

UPDATE

Ok I fixed this by using a different script for the slide/fade element effect. It's on JSFiddle FadeIn on Scroll (jQuery) (thanks tcloninger whoever you are) It's a much simpler script that does exactly what I need. I just edited it a little to include the sliding effect via margins.

Original Question

I searched (Google and SO) but could not find anything similar enough to my code.

I'm using one script to fix my nav to the top of the screen after the user has scrolled through the first screen (viewable area). The second script I'm running is one that will slide/fade in an element from one side as it enters the viewport. This is copied from the demo here verbatim: http://designshack.net/articles/css/how-to-design-animated-sliding-page-elements-with-css/ I've also got a giant background video embedded as the next element right after the nav and position: fixed.

The issue I'm having is this: Once you've scrolled through to the sliding elements, and the navbar has fixed itself to the top of the screen, if you scroll back up, you can't reach the top of the page again unless you refresh the page. It's actually stopping right at the top of an image overlaying the embedded video (slogan.png below). The only styling on that is display: block; margin: 0 auto;

First script which is embedded in the document:

// nav fixing
$(window).scroll(function() {
    var scrolld = $(window).scrollTop();
    if (scrolld >= $(window).height()) {
        // fix nav to top
        $("#fixie").addClass("fixie");

        // hide main logo
        $("#logo").removeClass("show").addClass("hide");

        // show mini logo
        $("#logo-sm").removeClass("hide").addClass("show");
    } else {
        // un-fix nav to top
        $("#fixie").removeClass("fixie");

        // show main logo
        $("#logo").removeClass("hide").addClass("show");

        // hide mini logo
        $("#logo-sm").removeClass("show").addClass("hide");
    }
});

Second script which is linked to the document:

$(function() {
    var $blocks = $('.animBlock.notViewed');
    var $window = $(window);

    $window.on('scroll', function(e){
        $blocks.each(function(i,elem){
            if($(this).hasClass('viewed')) 
                return;
            isScrolledIntoView($(this));
        });
    });
});
/* http://stackoverflow.com/a/488073/477958 */
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemOffset = 0;

    if(elem.data('offset') != undefined) {
        elemOffset = elem.data('offset');
    }
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    if(elemOffset != 0) { // custom offset is updated based on scrolling direction
        if(docViewTop - elemTop >= 0) {
            // scrolling up from bottom
            elemTop = $(elem).offset().top + elemOffset;
        } else {
            // scrolling down from top
            elemBottom = elemTop + $(elem).height() - elemOffset
        }
    }

    if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
        // once an element is visible exchange the classes
        $(elem).removeClass('notViewed').addClass('viewed');

        var animElemsLeft = $('.animBlock.notViewed').length;
        if(animElemsLeft == 0){
            // with no animated elements left debind the scroll event
            $(window).off('scroll');
        }
    }
}

The HTML:

<header id="top">
    <img src="images/logo-blue-white.png" alt="logo" id="logo" class="logo show">
    <nav id="fixie" class="navbar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <i class="fa fa-navicon"></i>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><img src="images/logo-white-sm.png" alt="logo" id="logo-sm" class="logo-sm hide"></li>
                <li><a href="index.html" class="active">home</a></li>
                <li><a href="#">thing1</a></li>
                <li><a href="#">thing2</a></li>
                <li><a href="#">thing3</a></li>
                <li><a href="#">thing4</a></li>
                <li><a href="#">thing5</a></li>
            </ul>
        </div>
    </nav>
</header>
<section id="home" class="home">
    <div class="video-boxe">
        <video autoplay preload="auto" class="play-video">
            <source src="images/video/things.webm" type="video/webm">
        </video>
        <div class="slogan">
            <img src="images/slogan.png" alt="slogan" class="img-responsive">
        </div>
    </div>
</section>
<!-- stuff -->
<section class="overlap">
    <div class="promo desktop">
        <div class="row">
            <div class="col-md-7">
                <div data-position="left" data-offset="60" class="notViewed animBlock">
                    <img src="images/desktop1.png" alt="desktop" class="img-responsive screenshots">
                </div>
            </div>
            <div class="col-md-5">
                <h1 class="title">Big Words</h1>
                <h2 class="subtitle">Small Words</h2>
            </div>
        </div>
    </div>
    <div class="promo mobile">
        <div class="row">
            <div class="col-md-7">
                <h1 class="title">Big Words</h1>
                <h2 class="subtitle">Small Words</h2>
            </div>
            <div class="col-md-5">
                <div data-position="right" data-offset="60" class="notViewed animBlock">
                    <img src="images/mobile.png" alt="mobile" class="img-responsive screenshots slidey">
                </div>
            </div>
        </div>
    </div>
</section>

I don't have any live code, I'm working locally, so I'll build a JSFiddle and add it.