Простой макет, состоящий из двух слоев. Первый слой фиксированный, остальные нет.
После нажатии на ссылку ведущую к якорю, на какие-то миллисекунды анимация притормаживает, далее анимация отрабатывает плавно.
Так же, при скролле, поддергивает фон в фиксированном слое.
Такое происходит только если к фону применен:
background-size: cover;
Без, вся анимация от и до проходит плавно.
Помогите разобраться из-за чего это происходит?
Пример в живую
Zip архив
Исходный код:
<section class="section-fixed">
<div class="fixed-content">
<div class="container">
<h1>Заголовок</h1>
<a href="#2">Якорь</a>
</div>
</div>
</section>
<section id="2" class="section">
<div class="container">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</section>
<section class="section section-second">
<div class="container">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</section>
<section class="section section">
<div class="container">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</section>
<section class="section section-second">
<div class="container">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</section>
html * {
webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 21px;
color: #3d3536;
}
body,
html {
height: 100%;
}
a {
color: #b4d7a8;
}
.container {
width: 980px;
margin: 0 auto;
}
.container::after {
content: '';
display: table;
clear: both;
}
.section-fixed {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: table;
width: 100%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("../img/bg.jpg");
background-attachment: fixed;
z-index: 1;
}
.fixed-content {
display: table-cell;
vertical-align: middle;
}
.fixed-content h1 {
position: fixed;
text-align: center;
font-size: 30px;
color: white;
margin: 0 100px;
}
.fixed-content a {
position: fixed;
text-align: center;
}
.section {
padding: 100px 0;
background-color: #fff;
position: relative;
z-index: 2;
}
.section-second {
background: #ccc;
}
/* --- Section-fixed --- */
$(document).ready(function() { vph = $(window).height();
$('.section-fixed').css('height',vph); });
$(window).resize(function(){ vpw = $(window).width();
vph = $(window).height(); $('.section-fixed').css('height',vph);
});
/* --- Smooth Scroll --- */
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
