Question

我正在开发一个具有视差效果的网站。我正在使用skrollr.js插件来实现所需的视差效果。在使用'background-position'并找到效果紧张之后，我转而使用CSS translate（）属性，如许多答案中所建议的那样。然而，尽管大多数抖动并没有消失（有些是由于我猜的大尺寸而存在），但现在我得到的是两个幻灯片之间的一些空间，因为这里很明显。需要摆脱这个空间

Demo

很难弄清楚为什么会这样。任何帮助将不胜感激

PS：我正在使用Bootstrap 3

相关代码如下 -

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="mortgage">
    <div class="bgrnd-img" data-anchor-target="#mortgage">
        <nav class="navbar navbar-default navbar-fixed-top navbar-trans" role="navigation">
            <div class="container">
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li data-slide="1"><a href="">Mortgage</a></li>
                        <li data-slide="2"><a href="">Lending</a></li>
                        <li data-slide="3"><a href="">Insurance</a></li>
                        <li data-slide="4"><a href="">Testimonials</a></li>
                        <li data-slide="5"><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<div id="lending">
    <div class="bgrnd-img" data-anchor-target="#lending" data-top="transform: translate(0px,0px)" data-bottom-top="transform: translate(0px,250px)" data-slide="2">
        <div class="container display-table">
            <div class="row vgutter">
                <section class="col-lg-6 col-lg-offset-3">
                    At our company we offer you the truest advise for all your loan needs. From education to car to rentals, our expertise in lending benefits customers in making easy choices. 
                </section>
            </div>
        </div>
    </div>
</div>
    <div id="insurance">
        <div class="bgrnd-img" data-anchor-target="#insurance" data-top="transform: translate(0px,0px)" data-bottom-top="transform: translate(0px,250px)" data-slide="3">

        </div>
    </div>
    <div id="testimonials">
        <div class="bgrnd-img" data-anchor-target="#testimonials" data-top="transform: translate(0px,0px)" data-bottom-top="transform: translate(0px,250px)" data-slide="4">

        </div>
    </div>
    <div id="contact">
        <div class="bgrnd-img" data-anchor-target="#contact" data-top="transform: translate(0px,0px)" data-bottom-top="transform: translate(0px,250px)" data-slide="5">

        </div>
    </div>
    <script type="text/javascript" src="js/skrollr.js"></script>
</body>
</html>

CSS

html,body{    
width:100%;     
height:100%;  
}

body > div{
width: 100%;
height: 100%;
}

#mortgage .bgrnd-img{
background: url('../img/contact1.jpg');
}

#insurance .bgrnd-img{
background: url('../img/insurance1.jpg');
}

#lending .bgrnd-img{
background: url('../img/lending1.jpg');
}

#contact .bgrnd-img{
background: url('../img/contact1.jpg');
}

#testimonials .bgrnd-img{
background: url('../img/testimonials1.jpg');
}

.bgrnd-img{
width: 100%;
height: 100%;
color: #ffffff;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover !important;
}

.navbar-default{
min-height: 80px;
transition: background-color 1s ease;
}

.navbar-default .navbar-nav > li > a{
line-height: 40px;
color: #ffffff;
}

.navbar-trans{
background-color: transparent;
border: none;
}

.navbar-bgrnd{
background-color: #0cb4eb;
border: none;
}

.display-table{
display: table;
vertical-align: middle;
height: 100%;
}

.vgutter{
display: table-cell;
vertical-align: middle;
}

的JavaScript

$(document).ready(function(){

var s = skrollr.init({

    forceHeight: false,
    smoothScrolling: false
});

//Initialize variables
var links = $(".navbar-nav").find("li");
slide = $(".bgrnd-img");
mywindow = $(window);
htmlbody = $('html,body');

//Scroll to a particular section on click
function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.bgrnd-img[data-slide="' + dataslide + '"]').offset().top
    }, 1000, 'easeInOutQuint');
}

links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

//Change header background on scroll
$(window).scroll(function(){

    var scroll = $(window).scrollTop();

    if(scroll <= 0){

        $(".navbar-default").removeClass("navbar-bgrnd");
        $(".navbar-default").addClass("navbar-trans");
    }
    else{

        $(".navbar-default").addClass("navbar-bgrnd");
        $(".navbar-default").removeClass("navbar-trans");
    }
});

});

使用css translate会导致div之间的空间

0 个答案: