[HTML] DIV menu fisso durante lo scroll

Stato
Chiusa ad ulteriori risposte.

felino

Utente Attivo
12 Dic 2013
940
10
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.179
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.449
338
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.
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
M [HTML] DIV all'interno di un altro DIV HTML e CSS 3
A [HTML] div flessibile con span HTML e CSS 14
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
S [HTML] Effetto hover in un div HTML e CSS 6
zorro [HTML] 'bucare ' un div HTML e CSS 10
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
S [HTML] spostare div se quello adiacente è vuoto HTML e CSS 6
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
A [WordPress] [HTML] Link in div con z-index inferiore WordPress 1
F [HTML] Centratura Div HTML e CSS 3
F [HTML] Scalare un div ma non il suo contenuto HTML e CSS 1
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
felino Shortcode e HTML Div WordPress 3
P caricare dati all'interno di un tag div html HTML e CSS 15
C in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli Javascript 7
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0

Discussioni simili