Come mantenere l'intestazione statica, sempre in primo piano durante lo scorrimento?

66

Usa position: fixed sul div che contiene l'intestazione, con qualcosa come

#header { 
    position: fixed; 
} 

#content { 
    margin-top: 100px; 
}

In questo esempio, quando #content inizia 100px sotto #header, ma come l'utente scorre, #header soggiorni in luogo. Ovviamente è ovvio che vorrete assicurarvi che lo #header abbia uno sfondo in modo che il suo contenuto sia effettivamente visibile quando i due div si sovrappongono. Date un'occhiata alla proprietà position qui: http://reference.sitepoint.com/css/position

fonte

2010-08-29 05:07:11

+2

a seconda della relazione tra i tuoi 'div's, potresti dover aggiungere' margin-top: -100px; 'all'intestazione' #' per ottenere torna dove vuoi. – rymo

+0

Conosci un modo per farlo scorrere fino a quando non tocca la parte superiore e quindi "position: fixed;"? Se la tua intestazione è iniziata sotto la parte superiore? –

+0

Non è contenuto nella larghezza DIV per me. – SearchForKnowledge

4

ecco una soluzione con css + jquery (javascript).

qui è collegamento demo Demo

//html 

<div id="uberbar"> 
    <a href="#top">Top of Page</a> 
    <a href="#bottom">Bottom of Page</a> 

</div> 

//css 

#uberbar { 
    border-bottom:1px solid #eb7429; 
    background:#fc9453; 
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%; 
} 

//jquery 

$(document).ready(function() { 
    (function() { 
     //settings 
     var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30; 
     var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); }; 
     var inside = false; 
     //do 
     $(window).scroll(function() { 
      position = $(window).scrollTop(); 
      if(position > topDistance && !inside) { 
       //add events 
       topbarML(); 
       $('#uberbar').bind('mouseenter',topbarME); 
       $('#uberbar').bind('mouseleave',topbarML); 
       inside = true; 
      } 
      else if (position < topDistance){ 
       topbarME(); 
       $('#uberbar').unbind('mouseenter',topbarME); 
       $('#uberbar').unbind('mouseleave',topbarML); 
       inside = false; 
      } 
     }); 
    })(); 
});

fonte

2010-08-29 05:25:47

3

Ecco la DEMO

Html:

<div class="header"> 
    <h1 class="header__content-text"> 
    Header content will come here 
    </h1> 
</div> 
<div class="page__content-container"> 
    <div> 
    <a href="http://imgur.com/k9hz3"> 
     <img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /> 
    </a> 
    </div> 
    <div> 
    <a href="http://imgur.com/TXuFQ"> 
     <img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /> 
    </a> 
    </div> 
</div>

CSS:

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 48px; 
    z-index: 10; 
    background: #eeeeee; 
    -webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12); 
    -moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12); 
    box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12); 
} 

.header__content-text { 
    text-align: center; 
    padding: 15px 20px; 
} 

.page__content-container { 
    margin: 100px auto; 
    width: 975px; 
    padding: 30px; 
}

fonte

2012-04-28 04:31:11

-6

I PERSO nally aveva bisogno di un tavolo con le intestazioni di sinistra e di cima visibili in ogni momento. Ispirato da diversi articoli, penso di avere una buona soluzione che potresti trovare utile. Questa versione non ha il problema di avvolgimento che altre solzioni hanno con div fluttuanti o dimensionamento flessibile/automatico di colonne e righe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script language="javascript" type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script> 
    <script language="javascript" type="text/javascript"> 
     // Handler for scrolling events 
     function scrollFixedHeaderTable() { 
      var outerPanel = $("#_outerPanel"); 
      var cloneLeft = $("#_cloneLeft"); 
      var cloneTop = $("#_cloneTop"); 
      cloneLeft.css({ 'margin-top': -outerPanel.scrollTop() }); 
      cloneTop.css({ 'margin-left': -outerPanel.scrollLeft() }); 
     } 

     function initFixedHeaderTable() { 
      var outerPanel = $("#_outerPanel"); 
      var innerPanel = $("#_innerPanel"); 
      var clonePanel = $("#_clonePanel"); 
      var table = $("#_table"); 
      // We will clone the table 2 times: For the top rowq and the left column. 
      var cloneLeft = $("#_cloneLeft"); 
      var cloneTop = $("#_cloneTop"); 
      var cloneTop = $("#_cloneTopLeft"); 
      // Time to create the table clones 
      cloneLeft = table.clone(); 
      cloneTop = table.clone(); 
      cloneTopLeft = table.clone(); 
      cloneLeft.attr('id', '_cloneLeft'); 
      cloneTop.attr('id', '_cloneTop'); 
      cloneTopLeft.attr('id', '_cloneTopLeft'); 
      cloneLeft.css({ 
       position: 'fixed', 
       'pointer-events': 'none', 
       top: outerPanel.offset().top, 
       'z-index': 1 // keep lower than top-left below 
      }); 
      cloneTop.css({ 
       position: 'fixed', 
       'pointer-events': 'none', 
       top: outerPanel.offset().top, 
       'z-index': 1 // keep lower than top-left below 
      }); 
      cloneTopLeft.css({ 
       position: 'fixed', 
       'pointer-events': 'none', 
       top: outerPanel.offset().top, 
       'z-index': 2 // higher z-index than the left and top to make the top-left header cell logical 
      }); 
      // Add the controls to the control-tree 
      clonePanel.append(cloneLeft); 
      clonePanel.append(cloneTop); 
      clonePanel.append(cloneTopLeft); 
      // Keep all hidden: We will make the individual header cells visible in a moment 
      cloneLeft.css({ visibility: 'hidden' }); 
      cloneTop.css({ visibility: 'hidden' }); 
      cloneTopLeft.css({ visibility: 'hidden' }); 
      // Make the lef column header cells visible in the left clone 
      $("#_cloneLeft td._hdr.__row").css({ 
       visibility: 'visible', 
      }); 
      // Make the top row header cells visible in the top clone 
      $("#_cloneTop td._hdr.__col").css({ 
       visibility: 'visible', 
      }); 
      // Make the top-left cell visible in the top-left clone 
      $("#_cloneTopLeft td._hdr.__col.__row").css({ 
       visibility: 'visible', 
      }); 
      // Clipping. First get the inner width/height by measuring it (normal innerWidth did not work for me) 
      var helperDiv = $('<div style="positions: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%;"></div>'); 
      outerPanel.append(helperDiv); 
      var innerWidth = helperDiv.width(); 
      var innerHeight = helperDiv.height(); 
      helperDiv.remove(); // because we dont need it anymore, do we? 
      // Make sure all the panels are clipped, or the clones will extend beyond them 
      outerPanel.css({ clip: 'rect(0px,' + String(outerPanel.width()) + 'px,' + String(outerPanel.height()) + 'px,0px)' }); 
      // Clone panel clipping to prevent the clones from covering the outerPanel's scrollbars (this is why we use a separate div for this) 
      clonePanel.css({ clip: 'rect(0px,' + String(innerWidth) + 'px,' + String(innerHeight) + 'px,0px)' }); 
      // Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed. 
      $("#_outerPanel").scroll(scrollFixedHeaderTable); 
     } 


     $(document).ready(function() { 
      initFixedHeaderTable(); 
     }); 

    </script> 
    <style type="text/css"> 
     * { 
      clip: rect font-family: Arial; 
      font-size: 16px; 
      margin: 0; 
      padding: 0; 
     } 

     #_outerPanel { 
      margin: 0px; 
      padding: 0px; 
      position: absolute; 
      left: 50px; 
      top: 50px; 
      right: 50px; 
      bottom: 50px; 
      overflow: auto; 
      z-index: 1000; 
     } 

     #_innerPanel { 
      overflow: visible; 
      position: absolute; 
     } 

     #_clonePanel { 
      overflow: visible; 
      position: fixed; 
     } 

     table { 
     } 

     td { 
      white-space: nowrap; 
      border-right: 1px solid #000; 
      border-bottom: 1px solid #000; 
      padding: 2px 2px 2px 2px; 
     } 

     td._hdr { 
      color: Blue; 
      font-weight: bold; 
     } 
     td._hdr.__row { 
      background-color: #eee; 
      border-left: 1px solid #000; 
     } 
     td._hdr.__col { 
      background-color: #ddd; 
      border-top: 1px solid #000; 
     } 
    </style> 
</head> 
<body> 
    <div id="_outerPanel"> 
     <div id="_innerPanel"> 
      <div id="_clonePanel"></div> 
      <table id="_table" border="0" cellpadding="0" cellspacing="0"> 
       <thead id="_topHeader" style="background-color: White;"> 
        <tr class="row"> 
         <td class="_hdr __col __row"> 
          &nbsp; 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
         <td class="_hdr __col"> 
          TOP HEADER 
         </td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="row"> 
         <td class="_hdr __row"> 
          MY HEADER COLUMN: 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
        </tr> 
        <tr class="row"> 
         <td class="_hdr __row"> 
          MY HEADER COLUMN: 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
         <td class="col"> 
          The quick brown fox jumps over the lazy dog. 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div id="_bottomAnchor"> 
     </div> 
    </div> 
</body> 
</html>

fonte

2012-06-01 09:20:59

4

Se è possibile utilizzare bootstrap3 quindi è possibile utilizzare i CSS "barra di navigazione-top fisso" Inoltre è necessario aggiungere di seguito CSS per spingere il contenuto della pagina verso il basso

body{ 

    margin-top:100px; 
}

fonte

2014-09-08 04:35:37 richpalsingh

1

Invece di lavorare con il posizionamento e padding/margin e senza conoscere le dimensioni dell'intestazione, c'è un modo per mantenere fissa l'intestazione giocando con lo scroll.

Vedi l'this plunker con un colpo di testa fisso:

<html lang="en" style="height: 100%"> 
<body style="height: 100%"> 
<div style="height: 100%; overflow: hidden"> 
    <div>Header</div> 
    <div style="height: 100%; overflow: scroll">Content - very long Content...

La chiave qui è un mix di height: 100% con overflow.

Vedere una domanda specifica sulla rimozione dello scroll dall'intestazione here e rispondere allo here.

fonte

2015-10-12 08:03:28

+0

Una soluzione problematica. Sembra che la parte inferiore del contenuto sia spinta sotto la finestra. Puoi vederlo più chiaramente se rendi l'intestazione più alta. Qualche idea su come risolvere questo? –

+0

Questo sembra funzionare bene ma lo scroll diventa molto lento sul mio iPhone5. –

+0

@AlainZelink - Quale app browser stai usando su un iPhone5? –

1

Dopo guardando attraverso tutte le risposte, ho trovato un modo leggermente diverso con il minimo CSS e JS, solo l'altezza della testata deve essere impostata correttamente in #content, in questo caso 60px

CSS:

#header { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 10; 
} 
#content { 
    margin-top: 60px; 
    z-index:1; 
}

HTML:

<body> 
    <div id="header" style="background-color:GRAY; text-align:center; border-bottom:1px SOLID BLACK; color:WHITE; line-height:50px; font-size:40px"> 
    My Large Static Header 
    </div> 
    <div id="content"> 
    <!-- All page content here --> 
    </div> 
</body>

fonte

2017-02-14 21:42:29 ChrisAdmin

Come mantenere l'intestazione statica, sempre in primo piano durante lo scorrimento?

risposta

Problemi correlati