sidebar appiccicoso nel design Flexbox

Come rendere le barre laterali nel layout del Santo Graal realizzate con flexbox essere rese appiccicose? vale a dire. la parte side e nav dell'html dovrebbe smettere di scorrere più in basso quando l'ultimo elemento ha raggiunto. Ho provato diversi modi ma ho ottenuto scarso successo.sidebar appiccicoso nel design Flexbox

HTML:

<body> 
    <header>header</header> 
    <div id='main'> 
     <article>This area has lot of content </article>` 
     <nav> This nav should not scroll</nav> 
     <aside>This aside too</div></aside> 
    </div> 
    <footer>footer</footer> 
</body>

CSS:

body { 
    /*font: 24px Helvetica;*/ 
    background: #999999; 
    } 

    #main { 
    min-height: 800px; 
    margin: 0px; 
    padding: 0px; 
    display: -webkit-flex; 
    display:   flex; 
    -webkit-flex-flow: row; 
      flex-flow: row; 
    } 

    #main > article { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #cccc33; 
    border-radius: 7pt; 
    background: #dddd88; 
    -webkit-flex: 3 1 60%; 
      flex: 3 1 60%; 
    -webkit-order: 2; 
      order: 2; 
    } 

    #main > nav { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #8888bb; 
    border-radius: 7pt; 
    background: #ccccff; 
    -webkit-flex: 1 6 20%; 
      flex: 1 6 20%; 
    -webkit-order: 1; 
      order: 1; 
    } 

    #main > aside { 
    margin: 4px; 
    padding: 5px; 
    border: 1px solid #8888bb; 
    border-radius: 7pt; 
    background: #ccccff; 
    -webkit-flex: 1 6 20%; 
      flex: 1 6 20%; 
    -webkit-order: 3; 
      order: 3; 
    } 

    header, footer { 
    display: block; 
    margin: 4px; 
    padding: 5px; 
    min-height: 100px; 
    border: 1px solid #eebb55; 
    border-radius: 7pt; 
    background: #ffeebb; 
    }

fonte

2016-06-09 Pavan Kumar

Sto anche cercando di capire questo fuori! Ecco un CodePen aggiornato con un esempio: http://codepen.io/sheriffderek/pen/XMXRqo – sheriffderek

Ho aggiunto una taglia ... ma dubito che ci sia un modo affidabile per farlo. – sheriffderek

@sheriffderek puoi spiegare il problema un po 'meglio? Sto avendo difficoltà a seguire la descrizione di OP. –

-1

ho preso il codice dalla penna codice e riscritto il codice JS con una certa logica fatta con la barra laterale come required.Hope si è utile :)

var stickArea = $('aside ul'); 
 
var footArea = $('footer'); 
 
margin = 10; 
 
offtop = stickArea.offset().top - margin; 
 
offbtm = footArea.offset().top - (margin * 3 + stickArea.height()); 
 

 
$(window).scroll(function() { 
 
    topScr = $(window).scrollTop(); 
 
    if (topScr > offtop && stickArea.hasClass('natural')) { 
 
    stickArea.removeClass('natural').addClass('fixed').css('top', margin); 
 
    } 
 
    if (offtop > topScr && stickArea.hasClass('fixed')) { 
 
    stickArea.removeClass('fixed').addClass('natural').css('top', 'auto'); 
 
    } 
 
    if (topScr > offbtm && stickArea.hasClass('fixed')) { 
 
    stickArea.removeClass('fixed').addClass('bottom').css('top', offbtm); 
 
    } 
 
    if (offbtm > topScr && stickArea.hasClass('bottom')) { 
 
    stickArea.removeClass('bottom').addClass('fixed').css('top', margin); 
 
    } 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 

 
.master { 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.master .inner-w { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -ms-flex-preferred-size: 960px; 
 
    flex-basis: 960px; 
 
} 
 

 
.master main { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
} 
 

 
@media (min-width: 900px) { 
 
    .master main { 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
    } 
 
} 
 

 
.master .content { 
 
    -ms-flex-preferred-size: 70%; 
 
    flex-basis: 70%; 
 
    min-height: 2000px; 
 
} 
 

 
.master aside { 
 
    -ms-flex-preferred-size: 350px; 
 
    flex-basis: 350px; 
 
    -webkit-box-flex: 0; 
 
    -ms-flex-positive: 0; 
 
    flex-grow: 0; 
 
    -ms-flex-negative: 0; 
 
    flex-shrink: 0; 
 
} 
 

 
.master aside .widget-list { 
 
    width: 330px; 
 
} 
 

 
body.sticky-sidebar .master aside .widget-list { 
 
    position: fixed; 
 
    top: 10px; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    background: #add8e6; 
 
    padding: 10px; 
 
} 
 

 
.master { 
 
    background: #90ee90; 
 
} 
 

 
.master .inner-w { 
 
    padding: 10px; 
 
} 
 

 
.master header, 
 
.master .content, 
 
.master aside, 
 
.master footer { 
 
    padding: 10px; 
 
} 
 

 
.master header { 
 
    background: #ffc0cb; 
 
    min-height: 120px; 
 
} 
 

 
.master .content { 
 
    background: #f5deb3; 
 
} 
 

 
.master aside { 
 
    background: #ffd700; 
 
    min-height: 400px; 
 
} 
 

 
.master aside .widget-list { 
 
    background: #d3d3d3; 
 
    padding: 10px; 
 
} 
 

 
.master aside .widget-list .widget { 
 
    background: rgba(0, 0, 0, 0.1); 
 
    padding: 10px; 
 
} 
 

 
.master aside .widget-list .widget:not(:first-of-type) { 
 
    margin-top: 10px; 
 
} 
 

 
.master footer { 
 
    background: #808080; 
 
    min-height: 500px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 

 
/** additional Css For Sidebar Logic **/ 
 

 
.master aside .widget-list.fixed { 
 
    position: fixed; 
 
} 
 

 
.master aside .widget-list.bottom { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='master'> 
 
    <div class='inner-w'> 
 

 
    <header> 
 
     <h1>Attempts at a sticky sidebar for squishy and more-complex flex-box layouts - sorta ~ eh?</h1> 
 
    </header> 
 

 
    <main> 
 
     <div class='content'> 
 
     content 
 
     </div> 
 

 
     <aside class=""> 
 
     <ul class='widget-list natural'> 
 
      <li class='widget'> 
 
      widget 1 
 
      </li> 
 
      <li class='widget'> 
 
      widget 2 
 
      </li> 
 
      <li class='widget'> 
 
      widget 3 
 
      </li> 
 

 

 
     </ul> 
 
     </aside> 
 
    </main> 
 

 
    <footer> 
 
     footer 
 
    </footer> 
 

 
    </div> 
 
</div>

fonte

2017-03-02 11:51:24

Dovresti spiegare che cosa fa il tuo codice in modo diverso rispetto al codice fornito. – sheriffderek

Supponendo di aver effettivamente capito cosa si sta cercando di ottenere, questo dovrebbe essere in linea con quello che stai cercando. La carne della soluzione sta nel definire tre stati o tre condizioni per posizionare l'elemento. In ordine di apparizione:

Se siamo passati oltre l'inizio della barra laterale ma non abbiamo ancora raggiunto la fine della barra laterale. Meno l'altezza del menu stesso.
Se siamo passati oltre la fine della barra laterale meno l'altezza del menu.
Se il valore di scorrimento della pagina è inferiore al punto iniziale della barra laterale. Vale a dire, lo stato naturale del menu, prima di scorrere.

if(currentScrollPosition >= sidebarPosition && currentScrollPosition <= threshold) 
{ 
    $widget.css({top: 10, position:'fixed'}); 
} 
else if(currentScrollPosition >= threshold) 
{ 
    $widget.css({top: threshold, position:'absolute'}); 
} 
else if(currentScrollPosition <= sidebarPosition) 
{ 
    $widget.css({top: 'auto', position:'static'}); 
}

http://codepen.io/anon/pen/jByPEJ

fonte

2017-03-08 15:38:55

Questa è la stessa idea con cui stiamo già lavorando, ma nel nostro caso stiamo aggiungendo e rimuovendo una classe vs impostando esplicitamente lo stile con JS. http://codepen.io/sheriffderek/pen/XMXRqo – sheriffderek

Giusto, ma il tuo non funziona se il menu di navigazione raggiunge mai il piè di pagina. –

Sì. È vero, ma non è la parte "appiccicosa", vero? – sheriffderek

Cosa succede ad usare il nuovo CSS3 position: sticky sugli elementi nav e aside?

Lo svantaggio di questo approccio è che non è supportato da Internet Explorer, ma richiede zero Javascript.

ho fatto che il cambiamento qui:

body { 
 
    /*font: 24px Helvetica;*/ 
 
    background: #999999; 
 
    } 
 

 
    #main { 
 
\t \t position: relative; 
 
    min-height: 800px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: -webkit-flex; 
 
    display:   flex; 
 
    -webkit-flex-flow: row; 
 
      flex-flow: row; 
 
    } 
 

 
    #main > article { 
 
    margin: 4px; 
 
    padding: 5px; 
 
    border: 1px solid #cccc33; 
 
    border-radius: 7pt; 
 
    background: #dddd88; 
 
    -webkit-flex: 3 1 60%; 
 
      flex: 3 1 60%; 
 
    -webkit-order: 2; 
 
      order: 2; 
 
    } 
 

 
    #main > nav { 
 
\t 
 
    margin: 4px; 
 
    padding: 5px; 
 
    border: 1px solid #8888bb; 
 
    border-radius: 7pt; 
 
    background: #ccccff; 
 
    -webkit-flex: 1 6 20%; 
 
      flex: 1 6 20%; 
 
    -webkit-order: 1; 
 
      order: 1; 
 
    } 
 

 
    #main > aside { 
 
    margin: 4px; 
 
    padding: 5px; 
 
    border: 1px solid #8888bb; 
 
    border-radius: 7pt; 
 
    background: #ccccff; 
 
    -webkit-flex: 1 6 20%; 
 
      flex: 1 6 20%; 
 
    -webkit-order: 3; 
 
      order: 3; 
 
    } 
 

 
#main > nav, #main > aside { 
 
\t position: sticky; 
 
\t top: 0; 
 
\t height: 100%; 
 
} 
 

 
    header, footer { 
 
    display: block; 
 
    margin: 4px; 
 
    padding: 5px; 
 
    min-height: 100px; 
 
    border: 1px solid #eebb55; 
 
    border-radius: 7pt; 
 
    background: #ffeebb; 
 
    }

<body> 
 
    <header>header</header> 
 
    <div id='main'> 
 
     <article>This area has lot of content </article>` 
 
     <nav> This nav should not scroll</nav> 
 
     <aside>This aside too</div></aside> 
 
    </div> 
 
    <footer>footer</footer> 
 
</body>

fonte

2018-02-23 22:52:40

sidebar appiccicoso nel design Flexbox

risposta

Problemi correlati