javascript - 由于视差滚动功能，导航栏和标题图像(背景图像)之间的差距

Question

我正在努力为我的所有背景图像获取视差，我遇到了一个问题，该问题已由 stackoverflow 社区专家解决并使它们正常工作，但我昨天没有意识到的一个小问题是现在我之间有一个非常细的白色条导航栏和标题图像，它与视差代码有关(因为没有视差代码就没有间隙)所以如果有人可以检查这个并帮助我，那就太好了..

jquery 代码:-

$(document).ready(function() { 
 $(function() {

// Cache the window object
var $window = $(window);

// Parallax background effect
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641



$('section[data-type="background"]').each(function() {

    var $bgobj = $(this); // assigning the object

    $(window).scroll(function() {

        // scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!

        var yOffset = $bgobj.offset().top;
        var yPos = -(($window.scrollTop() - yOffset) / $bgobj.data('speed'));

        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });

    }); // end window scroll

});

});

HTML 代码:-

<header>

        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">


                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FEATURES <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">TEAM</a></li>
                        <li><a href="#">TESTIMONIALS</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SHOP <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">PRICING</a></li>
                        <li><a href="#">BLOG</a></li>
                        <li><a href="#">CONTACT</a></li>

                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <section class="header-image" data-type="background" data-speed="5">
            <h1> Elegant Single Page WordPress theme</h1>
            <p>Easy , Reliable and Awesome</p>
            <button class="btn btn-md btn-info">GET STARTED</button>

        </section>

    </header>

CSS 代码:-

.header-image {
    height:40em;
    background: url('../images/beach_sunset.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
}

.navbar-default {
    margin: 0;
    padding: 0;
}

.header-image h1 {
    padding: 3em 0.5em 0;
}

.header-image p {
    font-size: 1.2em;
    padding-top: 1em;
}

.header-image h1,
.header-image p {
    color: white;
    text-align: center;
}

.header-image button {
    display: block;
    margin: 2em auto;
}

Answer 1

问题是页面上的另一张图像需要 yOffset 而不是页面顶部的图像。 固定使用 2 种不同的数据类型，一种使用 yOffset，另一种不使用它。 长话短说: 提供的图像的 javascript 计算不正确