Div in position fixed rispetto al suo contenitore

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

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
 

JtothaX

Utente Attivo
2 Ott 2013
78
0
0
Treviso
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
Uff...ancora niente :(
Sto anche provando dei plugin ma il problema rimane.
Va sempre per conto suo, non rimane nel div genitore...