[HTML] DIV menu fisso durante lo scroll

[felino]

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]

da come ho capito allora devi giocare con "position: fixed;" del css!

 

[felino]

Ok, ma dovrei fare in modo che la classe venga associata quando il menù arriva al margine top della finestra, no?

 

[LorenzoPi]

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:

//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

 

[Shyson]

Ho lo stesso problema, quando la colonna destra arriva sopra, non scrolla.

<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]

@Shyson
No ti devi accodare a vecchi e defunti thread!!

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

Vedo che hai del PHP valuta la sezione PHP