Visualizzazione risultati 1 fino 12 di 12

Discussione: div fisso allo scroll della pagina!!!

  1. #1
    Guest

    Predefinito div fisso allo scroll della pagina!!!

    salve,vorrei creare un div fisso durante scroll,ovvero che quando si scrolla la pagina il div resta fisso e che poi quando incontra un altro div si sostituisce con quello che c'era prima.
    Lo so che non mi sono spiegato benissimo,ma sto facendo del mio meglio per essere piu preciso possibile.
    chi mi ha capito mi potrebbe aiutare passo passo?

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,744

    Predefinito

    Devi specificare mediante foglio di stile CSS un posizionamento fisso per l'elemento.
    http://www.html.it/pag/14235/posizio...egli-elementi/
    https://developer.mozilla.org/en-US/...ed_positioning

    La parte della sostituzione però non l'ho capita, puoi spiegarti meglio?
    Sposto nella sezione HTML, XHTML e CSS.
    Ultima modifica di karl94 : 15-09-2015 alle ore 16.40.21

  3. #3
    Guest

    Predefinito

    http://bigspotteddog.github.io/ScrollToFixed/
    Questo vorrei inserire nel mio sito (in alto a destra)

  4. #4
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,744

    Predefinito

    Nella medesima pagina che hai indicato trovi anche le istruzioni su come aggiungere il tutto al proprio sito. Hai provato a seguirle?

  5. #5
    Guest

    Predefinito

    devi aggiungere allo stile del tuo div l'attributo display:fixed e dopo questo lo sposti come vuoi te con i comandi: TOP, BOTTOM, LEFT, RIGHT

  6. #6
    Guest

    Predefinito

    Karl...non ci capisco niente
    Theworldofgaming non funziona

  7. #7
    Guest

    Predefinito

    Questo è quello che ti ho avevo detto io, in che senso non funziona che linguaggio stai usando?

    Prova con questo:
    http://www.giacomofrancini.it/blog/r...urante-scroll/
    (devi installare jQuery)

  8. #8
    Guest

    Predefinito

    Okay grazie mille ma...scusate l ignoranza....per inserire il jquery nel sito devo salvarlo con quale nome e con quale estensione

  9. #9
    Guest

    Predefinito

    Cioe...mi potete spiegare passo passo come crearlo perche a me non viene...anzi il browser mi restituisce una pagina bianca:(

  10. #10
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,744

    Predefinito

    Stai provando sul tuo spazio web? Se indichi l'indirizzo della pagina possiamo controllare cosa sbagli.

  11. #11
    Guest

    Predefinito

    allora innanzitutto ho trovato l'errore (mancavano alcune parentesi).
    Il problema vero e proprio che mi sorge adesso è che al posto di un'immagine c'è un testo che scrolla.
    mi potete dire cosa devo modificare?
    Codice HTML:
    <html>
    <head>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    </head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    // barra delle pagine che segue lo scroll	
    $(function() {
    $(window).scroll(function() {
    if ($(window).scrollTop()>0){//indichi quando far partire il menu, >0 significa che parte appena scendi di 1 px con la pagina, il menu comincia a seguirti
    muovi=$(window).scrollTop(); //il div segure la pagina agganciandosi al top, se vuoi che sia più in basso o più in alto aggiungi o sottrai il valore
    }else{
    muovi=0; //posizione iniziale, quando con lo scroll torni ad inizio pagina
    }
    $('#prova').stop(true, true).
    animate({
    top: muovi 
    },'linear');
    });	
    
    });
    </script>
    <body>
    
    <div id="prova"
    <div id="prova" style="position: absolute; left: 42px; top: 0px; width: 101px; height: 55px; z-index: 1; color: #F00; font-family: Verdana, Geneva, sans-serif; font-size: 30px;">PROVA</div>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    
    
    prova</p>
    </body>
    </html>
    Ultima modifica di karl94 : 23-09-2015 alle ore 18.09.35 Motivo: Formattazione

  12. #12
    Guest

    Predefinito

    chi mi aiuta?:(

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •