Comportamento strano jQuery fixDiv

[gleekle]

Ciao ragazzi, sono nuovo del forum. Mi sono iscritto sperando di trovare il vostro aiuto per un'anomalia (ammesso si possa definire tale) che non sto proprio riuscendo a risolvere.

Ho trovato in rete questo script per fissare nella parte alta del browser un determinato div. In pratica, scorrendo la pagina fino a un certo punto, ovvero fino al div indicato nella funzione, "#header-bottom", che si trova a 126px dall'inizio della pagina, quest'ultimo resta fisso in alto e non è influenzato dallo scorrere della pagina, in modo da avere il mio menu sempre visibile in alto.

<script>
jQuery(function($) {
function fixDiv() {
var $cache = $('#header-bottom'); 
if ($(window).scrollTop() > 126) 
$cache.css({'position': 'fixed', 'top': '0px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
});
</script>

Il codice funziona bene, o quasi. Non so se ho sbagliato qualcosa o è normale che si comporti in un certo modo. Praticamente, scorrendo la pagina e arrivando al punto in cui si trova #header-bottom, nel momento in cui fissa il div, il contenuto sottostante viene trascinato in alto di qualche pixel. Niente di drammatico, ma comunuqe un effetto fastidioso.

Avete idea da cosa possa dipendere? E se è possibile correggerlo?

Ho caricato la pagina che sto realizzando giusto per aiutarvi a farvi un'idea. La trovate qui: http://trofeips4.altervista.org/ Il div è quello del menu, terza riga, bianca. Se scorrete (lentamente si nota meglio) la slide sottostante o qualunque altro tipo di contenuto salta su.

Grazie per l'eventuale aiuto

[Xinod]

il comportamento e' normale perche' prendi un elemento che e' nel normale flusso (occupa spazio e naturalmente spinge gli elementi che lo seguono) e lo rendi fixed, fuori dal flusso,
gli elementi seguenti non sono piu' spinti verso il basso e si nota chiaramente un salto

dovresti risolvere aggiungendo un ulteriore contenitore attorno ad header-bottom con un altezza fissa

ciao

[gleekle]

Ti ringrazio per la spiegazione e il consiglio. Risolto! Ho imparato una cosa nuova

[gleekle]

Ciao ragazzi, resuscito un attimo questa discussione perché mi è sorto un dubbio. Come inserisco lo scrip (ve lo ripropongo qui in basso) nel file .js esterno? Ci ho provato in vari modi, ma sbaglio qualcosa. Non ho ancora molta dimestichezza con jQuery, evidentemente.

<script>
jQuery(function($) {
function fixDiv() {
var $cache = $('#header-bottom'); 
if ($(window).scrollTop() > 126) 
$cache.css({'position': 'fixed', 'top': '0px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
});
</script>