Problema disfixing un div con uno sfondo o il suo attachment
Salve a tutti Voi ragazzi, mi scuso per ciò che dirò non ho un'abilità molto ricercata in fatto di oratoria quindi potrei dire in modo che voi capiate solo la struttura del mio codice, partiamo quindi col visualizzare la mia chiamiamola "bozza" del Dom
Codice HTML:
<!doctype html>
<html>
<head>
<title>Try</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function()
{
/***solo se si vuole usare una grandezza dell'empty-window in base a un determinato elemento***/
/*
var ew = $(elemento);
var ewh = $(window).height - ew.height();
ew.css('widht',ewh + "px");
*/
var copri = $('#copri'); //sfondo che sta sopra, il coperchio
var fondo = $('#fondo'); //sfondo sotto
fondo.on('scroll', function()
{
if(fondo.scrollTop() >= copri.height())
{
fondo.css('background-attachment','inherit').removeClass('be-scrolled').removeClass('be-fixed'); //solo una cacchiata per provarle tutte
}
else fondo.css('background-attachment','fixed').addClass('be-scrolled'.)addClass('be-fixed');
});
});
</script>
<style>
body { margin:0px; }
#wrap { width:400px; margin:auto; }
#box-up {}
#box-inner { box-shadow:0px 0px 150px 0px #111; width:100vw; height:100vh; }
#empty-window { height:60vh; }
.box { width:100vw; height:100vh; background-repeat:no-repeat; }
.be-fixed { position:fixed; top:0px; left:0px; }
.be-scrolled { overflow:auto; }
#copri { background-image:url('http://wallpapers.lawebdeldj.com/wp-content/uploads/2014/10/DJ_Girl_Manga_Wallpaper_HD_www.djlogic.es_.jpg'); background-size:100% 100%;}
#fondo {
background-image:url('http://i.imgur.com/td2y5xn.png');
background-size:cover;
}
/*** lorem ipsum and co ****/
p { padding:10px; background:rgba(0,0,0,0.8); color:#fff; font-family:Verdana; font-size:13pt; }
</style>
</head>
<body>
<div id='box-up'>
<div id='fondo' class='box be-scrolled be-fixed'>
<div id='box-inner'>
<div id='copri' class='box'></div>
</div>
<div id='empty-window'></div>
<div id='wrap'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</body>
</html>
Forse vi chiederete: che vuol fare?
Allora, ci sono due sfondi e un testo a caso, allora c'è uno sfondo che deve stare in alto diciamo fissato e sotto, poi c'è uno sfondo che starà sopra e sarà scrollabile, questo secondo sfondo servirà da "coperchio dello sfondo, entrambi gli sfondi hanno grandezze uguali, entrambi: w:100vw e h:100vh.
E quello che vorrei fare è:
Io scrollo, lo sfondo da "coperchio" si alza, quando ora si vede tutto il coperchio, ci deve essere il esto sotto che si sovrappone un pò allo sfondo sotto però quando discovero lo sfondo sotto quando lo scrolling della pagina raggiunge la grandezza dello sfondo sopra, lo sfondo sotto diventa scrollabile e il testo invece che salire sullo sfondo sotto, viene accompagnato all'unisono con lo sfondo.
E il mio problema è che non so come cavolo fare perché se tolgo l'overflow lo sfondo scompare e se tolgo il fissaggio della posizione non si muove, quindi se qualcuno può darmi delle dritte ne sarei grato!
Anche i consigli sono ben accetti.
Ah l'url se volete interagire è questo: http://evin.sneh.it, qui dovete cliccare il link che si trova più o meno al centro della pagina, oppure andate sul link assoluto
lazytime.altervista.org/help/evin/base-scroll
