我一直在爲所有背景圖像獲取視差,並且我有一個問題由一個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/ –