Question

更新

好的我通过使用不同的脚本来修复幻灯片/淡入淡出元素效果。它在JSFiddle FadeIn on Scroll (jQuery)上（感谢tcloninger无论你是谁）它是一个更简单的脚本，完全符合我的需要。我只是编辑了一下，通过边距包含滑动效果。

原始问题

我搜索过（Google和SO）但找不到与我的代码相似的任何内容。

在用户滚动浏览第一个屏幕（可视区域）后，我使用一个脚本将导航栏固定到屏幕顶部。我正在运行的第二个脚本是一个在进入视口时从一侧滑动/淡入元素的脚本。这是从这里的演示中逐字复制的：http://designshack.net/articles/css/how-to-design-animated-sliding-page-elements-with-css/我还有一个巨大的背景视频作为导航后的下一个元素嵌入position: fixed。

我遇到的问题是：一旦你滚动到滑动元素，并且导航栏已经固定到屏幕顶部，如果你向上滚动，你可以＆＃39 ; t再次到达页面顶部，除非您刷新页面。它实际上停留在覆盖嵌入视频的图像顶部（slogan.png下方）。唯一的样式是display: block; margin: 0 auto;

嵌入文档中的第一个脚本：

// 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");
    }
});

链接到文档的第二个脚本：

$(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');
        }
    }
}

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>

我没有任何实时代码，我在本地工作，因此我将构建一个JSFiddle并添加它。

两个jquery滚动功能和嵌入式背景视频 - 可能发生冲突

0 个答案: