Div in position fixed rispetto al suo contenitore

JtothaX · 2 Ott 2013

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 · 2 Ott 2013

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 · 3 Ott 2013

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

Uff...ancora niente

Sto anche provando dei plugin ma il problema rimane.
Va sempre per conto suo, non rimane nel div genitore...

fede12 · 23 Nov 2022

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!

fede12 · 23 Nov 2022

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!

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>

Cerca

Cerca

Div in position fixed rispetto al suo contenitore

JtothaX

Utente Attivo

criric

Super Moderatore

JtothaX

Utente Attivo

fede12

Nuovo Utente

fede12

Nuovo Utente

Discussioni simili