我一直在为所有背景图像获取视差,并且我有一个问题由一个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;
}
您可以创建一个JSFiddle来检查它吗?谢谢 –
没有问题..只需几分钟.. –
我试图创建小提琴https:// jsfiddle。net/b1mcw8zm/5/ –