I have the following problem:
I have some separate sections on the page in divs. Two of these divs get an image like background and background-position:fixed , so when scrolling the page the images should scroll together, making that parallax effect simple.
But in Google Chrome, when scrolling the page, the image does not follow and break all.
In Firefox it works and, amazingly so, in IE too!
It happens on the "about" page.
p, h3 {
font-family: "Open Sans",sans-serif;
font-weight: 200;
}
ul {
list-style: outside none none;
}
.social p, a:hover, a:active {
text-decoration: none;
}
h1, h2, .menu, .ver-mais {
text-align: center;
}
.ver-mais, .promo-title, .header-bkg, .slide, .separator {
background: none repeat scroll 0 0 #00011c;
}
.social img, nav li, .box-purple, .ver-mais, .gallery img, .ambiente img, .reside a {
transition: all 1s ease 0s;
}
.promocoes, .wrapper-sobre, footer, .social p, a:hover, a:active, .menu ul li a {
color: #fff;
}
.promo-title, .ambiente h1, .portfolio .ver-mais:hover {
color: #ed297b;
}
.box-purple, .promocoes a, .ver-mais {
display: block;
}
.ambiente h3 {
border-bottom: 1px solid black;
margin-bottom: 20px;
padding-bottom: 5px;
}
.header-bkg, .slide .item, .ambiente img, .separator {
width: 100%;
}
.box-purple, .promocoes a {
padding: 10px 20px;
}
.promocoes ul li, .portfolio-item img, .contato {
padding: 10px;
}
.promocoes ul li, .ambiente p {
text-align: justify;
}
.ambiente a, .promo-title {
font-weight: bold;
}
.ver-mais, .ambiente h1 {
margin: 0 auto;
}
.galeria, .ambiente img, .atendimento, .sala-vip, .localizacao {
padding: 20px;
}
.menu {
font-size: 7em;
margin-right: 5%;
margin-top: 4%;
}
.header-bkg {
height: 140px;
opacity: 0.8;
position: absolute;
z-index: -1;
}
.slide {
margin-top: -20%;
z-index: -5;
}
.slide .item {
max-height: 500px;
opacity: 0.6;
}
.promo-bkg-img {
background: url("../img/tattoo_2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.promo-bkg-filter {
background: none repeat scroll 0 0 rgba(0, 1, 28, 0.38);
}
.box-purple {
background: none repeat scroll 0 0 #46132d;
}
.box-purple:hover {
background: none repeat scroll 0 0 #7c2f57;
}
.promo-title {
font-size: 62pt;
letter-spacing: 0.7em;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.promo-list {
margin-bottom: 50px;
}
.portfolio-item img {
width: 90%;
}
.ver-mais {
color: #000;
}
.ambiente {
padding-bottom: 20px;
text-align: center;
}
.ambiente a {
color: #37011d;
}
.ambiente h1 {
border-top: 1px solid black;
width: 50%;
}
.ambiente img {
height: 300px;
}
.ambiente ul li {
list-style-type: square;
text-align: left;
}
.gallery img:hover, .ambiente img:hover {
box-shadow: 0 0 50px #999;
}
.separator {
height: 10px;
}
.social {
background: none repeat scroll 0 0 #010240;
text-align: center;
}
.social img {
margin: 20px;
width: 30%;
}
.social img:hover {
}
.sobre, .atendimento, .sala-vip {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.sobre h1, .atendimento h1, .sala-vip h1, .sobre h2, .atendimento h2, .sala-vip h2, .sobre p, .atendimento p, .sala-vip p {
color: #000;
}
.sobre img, .atendimento img, .sala-vip img {
margin: 2% 10%;
width: 80%;
}
.atendimento p, .sala-vip p {
color: #fff !important;
}
html {
height: 100%;
min-height: 100%;
}
body {
min-height: 100%;
}
html, body {
}
@media not all {
.equips, .sala-vip {
background-attachment: scroll;
}
}
.equips, .sala-vip {
padding: 5% 0;
}
.equips h1, .sala-vip h1 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.equips {
background: url("http://oi61.tinypic.com/2vs1en8.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
}
.sala-vip {
background: url("http://oi61.tinypic.com/dph8n6.jpg") repeat fixed 0 0 / 100% auto rgba(0, 0, 0, 0);
}
.contato {
background: none repeat scroll 0 0 #000149;
font-size: 15pt;
}
.contato span {
font-size: 10pt;
}
input:focus, input:hover, textarea:focus {
background: none repeat scroll 0 0 #010240;
transition: all 0.5s ease-in 0s;
}
.footer {
background: none repeat scroll 0 0 #232323;
padding: 10px;
}
.reside {
float: right;
}
.reside a {
color: #d81900;
}
.reside a:hover {
color: #fff;
}
.navbar-nav {
height: 140px;
}
.pagina-ativa, .nav li:hover, .nav li:focus {
background: none repeat scroll 0 0 #ed297b;
height: 140px;
margin-top: -47px;
padding-top: 47px;
}
.nav .active, .nav li a:hover, .nav li a:focus {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.form-control, .btn-send {
background: none repeat scroll 0 0 #822c58;
border: medium none;
border-radius: 0;
color: #fff !important;
font-family: "Playball",cursive;
font-size: 16pt !important;
padding: 4px !important;
}
.form-control:-moz-placeholder, .btn-send:-moz-placeholder {
color: #ecaacc;
}
.form-control::-moz-placeholder, .btn-send::-moz-placeholder {
color: #ecaacc;
}
.btn-send {
background: none repeat scroll 0 0 #dc64a1;
color: #ecaacc !important;
}
.shot {
display: none;
opacity: 1;
}
.navbar-toggle .icon-bar {
background: none repeat scroll 0 0 white;
}
@media screen and (min-width: 320px) and (max-width: 380px) {
#logo {
margin-top: -20px;
width: 50%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 200px;
width: 80%;
}
}
@media screen and (max-width: 620px) {
.promocoes, .sobre, .galeria {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
}
@media screen and (min-width: 410px) and (max-width: 620px) {
#logo {
width: 40%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes ul li {
padding-bottom: 1px;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
#logo {
width: 70%;
}
.navbar-nav {
margin-top: -33px;
}
.slide {
height: 420px;
margin-top: -28%;
}
.promo-title {
font-size: 40pt;
letter-spacing: 0.5em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 400px;
width: 80%;
}
}
@media screen and (max-width: 760px) {
.container > .navbar-collapse {
margin: 0 auto;
}
.navbar-collapse {
padding: 20px 15px !important;
width: 100%;
}
.navbar-nav {
height: auto;
margin: 0 auto;
}
.menu {
background: none repeat scroll 0 0 #333349;
font-family: Arial;
font-size: 18pt;
margin-top: 20% !important;
}
.menu li:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
height: auto;
margin: 0;
padding: 0;
}
.pagina-ativa {
height: auto;
margin: 0;
padding: 0;
}
}
@media screen and (min-width: 1020px) {
.slide .item {
max-height: 500px;
width: 100%;
}
.ambiente img {
height: 200px;
width: 100%;
}
}
@media screen and (min-width: 1280px) {
.slide .item {
max-height: 600px;
}
.ambiente img {
height: 300px;
width: 100%;
}
}
@media screen and (min-width: 1920px) {
.slide .item {
max-height: 1000px;
}
}<div class="wrapper-sobre">
<div class="sobre">
<div class="container ">
<div class="row">
<div class="col-md-12">
<h1>Sobre</h1>
<p>Há 6 anos o Jhony Bigu atua no mercado da tatuagem na Zona Norte e atualmente nas regiões do Itaim Bibi, Vila Nova Conceição e Vila Olímpia.</p>
<p>O Jhony Bigu esta altamente qualificados e apresenta um novo conceito de tatuagens personalizadas que segue um alto padrão de qualidade.</p>
<p>O tatuador Jhony Bigu é um profissional experiente e qualificado que está apto a ajuda-lo a encontrar ou criar o melhor desenho para sua tatuagem, prestando um atendimento personalizado desde a seleção de ideias até a elaboração da arte final para a tatuagem escolhida.</p>
</div>
<div class="col-md-12">
<div class="col-md-6">
<h2>Studio</h2>
<p>O Studio JB Tattoo está constantemente renovando seus equipamentos e materiais em busca da melhor tecnologia e qualidade disponível no mercado. </p>
</div>
</div>
</div>
</div>
</div>
<div class="equips fixbg" id="equipamentos">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Equipamentos</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Todos os matérias utilizados no Studio são totalmente descartáveis nas tatuagens, evitando-se o risco
de contaminação cruzada. O Studio conta com um ambiente aconchegante para que seus clientes sejam
atendidos de forma bastante à vontade, tendo o máximo de conforto durante a elaboração dos desenhos,
assim como na realização dos procedimentos de tatuagens.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="atendimento" id="atendimento">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Atendimento</h1>
</div>
<div class="col-md-6 box-purple">
<p>Política de atendimento:
<ul>
<li>Cada sessão de tatuagem tem duração de 1 hora</li>
<li>Acima de uma sessão de tatuagem ocorrera com duração media de 3 horas (podendo variar de acordo com a resistência e condições de cada cliente).</li>
<li>Necessário o preenchimento de Termo de responsabilidade para todos os clientes.</li>
<li>Tatuagens para menores de idade somente na presença de um dos responsáveis e mediante o preenchimento do termo de responsabilidade e documentos de identificação com foto.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="sala-vip fixbg" id="sala-vip">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Sala Vip</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div> How does the page scroll:
Searching the net, I found this possible solution:
$(document).scroll(function(){
$(this).find('.fixbg').hide().show(0);
});
But with this code, when scrolling the page, Scroll does not go to the end, hangs on the images and does not go down.