Problema disfixing un div con uno sfondo o il suo attachment

**lazytime** · 04-02-2015, 13.26.12

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

**karl94** · 04-02-2015, 14.13.19

Se vuoi che lo sfondo scorra assieme al contenuto di un elemento che ha un sistema di scorrimento causato da un overflow, puoi impostare su local la proprietà background-attachment.

**lazytime** · 04-02-2015, 14.33.32

Il brutto che deve essere così

Codice HTML:

<sfondosotto>
<sfondosopra></sfondosopra>
</sfondosotto>

Però così non si può usare il locale, o almeno dato che mi serve il position:fixed l'attachment è inutile

Per l'attachment dovrebbe essere così

Codice HTML:

<sfondosopra></sfondosopra>
<sfondosotto></sfondosotto>

ma così lo sfondo sotto non sta bloccato sopra e non è quel che voglio

Spero di non star dicendo cavolate, ma non ho ancora trovato una soluzione

**karl94** · 04-02-2015, 17.04.50

No, allora non ho capito cose vuoi fare. Non è che avresti un esempio reale di pagina di cui vorresti imitare il comportamento?

**lazytime** · 04-02-2015, 17.41.38

Ho risolto! Però vorrei un parere da Voi!

Ho aggiunto delle classi, inizialmente lo sfondo sotto sarà messo con posizionamento fisso che poi diventerà assoluto

Codice HTML:

if($(this).scrollTop() >= copri.height())
            {
            	fondo.removeClass('be-fixed').addClass('be-abs').removeClass('super-height').addClass('base-height').css('background-attachment','inherit');
            }
            else fondo.addClass('be-fixed').removeClass('be-abs').....

Questo è il body:

Codice HTML:

<div id='copri' class='box base-height'></div>
      	  <div id='fondo' class='box be-fixed super-height'></div>

L'url per vedere
Evin.sneh.it/base-scroll

Discussione: Problema disfixing un div con uno sfondo o il suo attachment

LinkBack

Strumenti discussione

Display

Problema disfixing un div con uno sfondo o il suo attachment

Regole di scrittura