[HTML] DIV menu fisso durante lo scroll

Stato
Chiusa ad ulteriori risposte.

felino

Utente Attivo
12 Dic 2013
892
9
18
Aci Catena (Catania)
Salve a tutti,
ultimamente mi capita di vedere sempre più spesso siti web in cui il menù posizionato a 3/4 della pagina durante lo scroll della stessa quando arriva nella parte alta del browser si blocca.

Pensandoci bene è una grande comodità in quanto permette di avere sempre il browser a portata di mano.

Penso che ci sia una mix di jquery e css, giusto?

Ho provato a fare una ricerca ma con scarso risultato...

Potreste segnalarmi un link ad un tutorial?

Grazie.
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
Sisi devi vedere con javascript o jquery quando la scrollbar si trova ad un certo punto gli assegni quella classe o gli applichi sopra direttamente il css! :)..

Ecco un esempio con javascript applicando il css direttamente sull'elemento:
Codice:
//Evento scroll
onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Salvo di quanto ho scrollato in px

  if (scrollTop > 500) { // Se è maggiore di 500px allora applico 'position: fixed' all'elemento passando l'id a document.getElementById('id-elemento')
      document.getElementById('myMenu').style.position = 'fixed';
    
  } else { // Sennò reimposto il valore 'position' di default
    document.getElementById('myMenu').style.position = 'static';
  }
};
Codice preso da QUA e modificato un pochino :)
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.141
1
38
Ho lo stesso problema, quando la colonna destra arriva sopra, non scrolla.

Codice:
<style>
  #container {
    position: absolute;
    right: 0;
    overflow: auto;
    z-index: -40;
  }

  #foo {
    height:500px;
    display: block;
  }
</style>
 
    <div id="container">
      <div id="foo">
    

    <script>
      document.getElementById('container').onscroll = function() {
        console.log("scrolling");
      };
    </script>


    <div id="secondary" class="widget-area" role="complementary">

        <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <div class="sidebar-primary">
            <?php dynamic_sidebar( 'sidebar-1' ); ?>
        </div>
        <?php endif; ?>

        <?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
        <div class="sidebar-secondary">
            <?php dynamic_sidebar( 'sidebar-2' ); ?>
        </div>
        <?php endif; ?>

        <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
        <div class="sidebar-tertiary">
            <?php dynamic_sidebar( 'sidebar-3' ); ?>
        </div>
        <?php endif; ?>
        
<div style=" text-align:center; margin-top:22px;"><a href="http://apple.com/it/" target="_blank"><img class="amici" style="width:28px; height:28px; text-align:center; border:0;" src="http://localhost:8888/MIEI_SITI/Albenessereblog/wp-content/uploads/mac.png" alt="Mac" title="Scegli Mac!"></a></div>

       </div><!-- #secondary -->

</div></div>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.181
312
83
@Shyson
No ti devi accodare a vecchi e defunti thread!!
noncisiamo.gif

Quando hai un quesito da porre devi aprire una discussione tua nella sezione più adatta
ok domanda.gif

Vedo che hai del PHP valuta la sezione PHP
 
Stato
Chiusa ad ulteriori risposte.