Div in position fixed rispetto al suo contenitore

J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
Amici del Forum salve,

vi pongo il mio primo quesito. Spero ci sia qualche anima pia in mezzo a voi che magari ci sia già passato e possa mettermi in carreggiata. Per un sito che sto chiudendo in questi giorni ho un piccolo problema. Vado schematico.

La pagina ha un contenitore box principale. Classe .soci_schede
Questo contiene un listato sulla sinistra e un altro contenitore a destra, rispettivamente ul.menu_nomi e div.contieni_schede_soci. Metto il menu in float:left e il div in float left.
Il contenitore principale, che li contiene, lo metto in float anche lui.

Ora voglio che il listato di sinistra segua l'utente mentre scrolla la pagina. Per facilitare la consultazione.
Con il position:fixed arrivo ad un certo punto che, se la finestra del browser non è abbastanza grande, il listato in questione se ne vada per conto suo fuori da ogni qualsivoglia div padre. E questo non lo voglio. Voglio che rimanga sempre e comunque all'interno del genitore div.soci_schede. Mi pare di capire che l'unica soluzione sia jQuery. Ho trovato un piccolo pezzo di codice, che vi posto di seguito, non riesco a settarlo non masticando ancora troppo jQuery. Come potrei fare?


Codice: 
jQuery(function($) {
	
    function fissatore() {
      var $elemento = $('.menu_nomi');
	  
      	if ($(window).scrollTop() > 320 && $(window).scrollTop() < 3600) 
        $elemento.css({'position': 'fixed', 'top': '10px'});
		
		else if ($(window).scrollTop() >= 3600) 
        $elemento.css({'position': 'absolute', 'bottom': '0px'});
		
      	else
        $elemento.css({'position': 'relative', 'top': 'auto'});
    }
	
    $(window).scroll(fissatore);
    fissatore();
	
});


Grazie ancitipatamente a tutti,
spero possiate illuminarmi

:)
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova a vedere se ti puo aituare questo esempio
HTML: 
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var yOffset = $("#box").offset().top;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > yOffset) {
                        $("#box").css({
                            'top': 0,
                            'position': 'fixed'
                        });
                    } else {
                        $("#box").css({
                            'top': yOffset + 'px',
                            'position': 'absolute'
                        });
                    }
                });
            })
        </script>
        <style type="text/css">
            #box {
                width: 300px;
                height: 80px;
                border: 1px solid red;
                background-color: yellow;
            }
            #boxd {
                float: right;
            }
        </style>
    </head>
    <body><div id="boxd"></div>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <div id="box"></div>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
    </body>
</html>
lo avevo usato qualche discussione fa ma non la torvo piu
 
J

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
criric ha scritto:
Ciao, prova a vedere se ti puo aituare questo esempio
HTML: 
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var yOffset = $("#box").offset().top;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > yOffset) {
                        $("#box").css({
                            'top': 0,
                            'position': 'fixed'
                        });
                    } else {
                        $("#box").css({
                            'top': yOffset + 'px',
                            'position': 'absolute'
                        });
                    }
                });
            })
        </script>
        <style type="text/css">
            #box {
                width: 300px;
                height: 80px;
                border: 1px solid red;
                background-color: yellow;
            }
            #boxd {
                float: right;
            }
        </style>
    </head>
    <body><div id="boxd"></div>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <div id="box"></div>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
        <p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p><p>testo</p>
    </body>
</html>
lo avevo usato qualche discussione fa ma non la torvo piu
Clicca per allargare...

Uff...ancora niente :(
Sto anche provando dei plugin ma il problema rimane.
Va sempre per conto suo, non rimane nel div genitore...
 
F

fede12

Nuovo Utente
22 Nov 2022
4
0
1
ragazzi ho lo stesso problema con WordPress tema Avada, qualsiasi opzione di codice che provo non funziona. Avete risolto per caso? Posso fornire il mio codice se qualcuno è interessato all'argomento. Grazie a tutti!
 
F

fede12

Nuovo Utente
22 Nov 2022
4
0
1
fede12 ha scritto:
ragazzi ho lo stesso problema con WordPress tema Avada, qualsiasi opzione di codice che provo non funziona. Avete risolto per caso? Posso fornire il mio codice se qualcuno è interessato all'argomento. Grazie a tutti!
Clicca per allargare...
per praticità inizio a inviare l'ultimo codice che sto provando, il div2 dovrebbe sparire come incontra il div3.

JAVA

$(document).ready(function() {
var $window = $(window);
var div2 = $('#div2');
var div1 = $('#div1');
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
console.log(div1_bottom);
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
div2.toggleClass('show', scrollTop > div1_top && (scrollTop + window.innerHeight) < div1_bottom);
});
});

CSS

#div1 {
position: relative;
height: 5px
}


#div2 {
position: fixed;
bottom:0;
z-index: 99999999;
display: none;
}

#div2.show {
display: block;
z-index: 99999999;
}

#div3 {
position: relative;
height: 5px
}

HTML

<div id="div1">
<div id="div2">This is <b>div2</b></div>
This is <b>div1</b>
<br>
<i>(Toggle show/hide <b>div2</b> when scrolling past the top of this element)</i>
</div>
<div id="div3">
This is <b>div3</b>
<br>
<i>(Toggle show/hide <b>div2</b> every time this div becomes visible in the window)</i>
</div>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
D Problema con lo scroll della pagina e del div position:fixed HTML e CSS 0
P div fisso con offset() o position() jQuery 2
E Creare un testo trasparente dietro un div HTML e CSS 5
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
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
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
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
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5

Discussioni simili

Alto Basso