Div com scroll que acompanha automatico

[DuDuduEdu]

Boa Noite, primeira vez postando aqui, antes de mais nada gostaria de agradecer às pessoas que nos ajudam nesse fórum. Graças a esse tipo de ferramenta o Brasil é hoje uma grande potência na área de desenvovlimento pela velocidade e quantidade de pessoas gabaritadas trocando idéia para chegar a uma solução.

Tenho uma grande dúvida, e preciso de ajuda, tenho uma página em php que carrega algumas div's com algumas informações e fotografias. Mas surgiu um problema conforme aumentamos muito o número de itens a serem consultados. Cria-se um scroll na página mas nas div's de visualizar as fotos e informações características dos itens a serem consultados ficam fixados em cima da página.

Gostaria de fazer com que três DIV's, que contenham essas informações e imagens desçam ou subam automaticamente junto com o rolar da página.

Sei que é possivel, tentei algumas coisas mas "empaquei". não sei se é melhor colocar elas em uma única DIV e assim tentar algum script ou se tenho como fazer com que as três subam e desçam automaticamente.

Segue link da página : http://www.automotivebrasil.com.br/veiculosnew.php

Caso alguém possa me ajudar com alguma idéia ou queira ver meu script eu posto aqui novamente.

Obrigado

Editado Novembro 17, 2008 por DuDuduEdu

[Gigabyte]

Fala DuDuduEdu!!!

Em primeiro lugar, concordo plenamente com a sua opinião sobre o SB. Se hoje sou um Programador pleno, foi graças a este excelente fórum e, por isso mesmo, sempre que posso compartilho o meu humilde conhecimento... mas vamos ao que interessa!!

No seu caso, se entendi bem, você quer que a sua DIV com a foto desça junto com a rolagem do scroll. Para isso você pode utilizar o style="position:fixed", que vai "travar" essa div na tela.

Outra opção seria um script que identifica o scroll e reposiciona a DIV na tela, o que exige um pouco mais de processamento e mais conhecimento de JS, pois funciona diferente pra cada navegador.

Em ambos os casos, o ideal é que todos os elementos que vão se "mover", estejam dentro de um elemento pai.

!

[DuDuduEdu]

Oi Giga, seguinte, com fixed me complica pois se o usuario reposicionar a tamanho do navegador dele, as div's de fotos, thumbs e descrição ficam sobrepostas ao texto. O lance seria esse script de reposicionamento. Tu tem como me ajudar??? vou colocar as div's dentro de uma só para facilitar chamada com id pai assim acho que ajuda um pouco.

Vlew

Abçs

edU =)

Fala DuDuduEdu!!!

Em primeiro lugar, concordo plenamente com a sua opinião sobre o SB. Se hoje sou um Programador pleno, foi graças a este excelente fórum e, por isso mesmo, sempre que posso compartilho o meu humilde conhecimento... mas vamos ao que interessa!!

No seu caso, se entendi bem, você quer que a sua DIV com a foto desça junto com a rolagem do scroll. Para isso você pode utilizar o style="position:fixed", que vai "travar" essa div na tela.

Outra opção seria um script que identifica o scroll e reposiciona a DIV na tela, o que exige um pouco mais de processamento e mais conhecimento de JS, pois funciona diferente pra cada navegador.

Em ambos os casos, o ideal é que todos os elementos que vão se "mover", estejam dentro de um elemento pai.

!

Editado Novembro 19, 2008 por DuDuduEdu

[Gigabyte]

Opa.. seguinte:

Para evitar essa sobreposição, cria a div pai com os elementos que serão fixos, define nela a largura em porcentagem e a largura mínima em pixels....

Pra ficar mais claro:

<div style="position: fixed; width: 90%; min-width: 820px;">
  <!-- aqui vão os elementos flutuantes -->
</div>

Só não sei se funciona em IE(ca)

[DuDuduEdu]

Fala Amigão

Seguinte, achei um script, dei umas modificadas e deu certinhoooooooooooooooooo. Vlew a ajuda....

Abçs

edU =)

script:

<script type="text/javascript"><!--   
/* Script by: www.jtricks.com  
 * Version: 20071017  
 * Latest version:  
 * www.jtricks.com/javascript/navigation/floating.html  
 */  
var floatingMenuId = 'floatdiv';   
var floatingMenu =   
{   
    targetX: -250,   
    targetY: 10,   

    hasInner: typeof(window.innerWidth) == 'number',   
    hasElement: typeof(document.documentElement) == 'object'  
        && typeof(document.documentElement.clientWidth) == 'number',   

    menu:   
        document.getElementById   
        ? document.getElementById(floatingMenuId)   
        : document.all   
          ? document.all[floatingMenuId]   
          : document.layers[floatingMenuId]   
};   

floatingMenu.move = function ()   
{   
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';   
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';   
}   

floatingMenu.computeShifts = function ()   
{   
    var de = document.documentElement;   

    floatingMenu.shiftX =     
        floatingMenu.hasInner     
        ? pageXOffset     
        : floatingMenu.hasElement     
          ? de.scrollLeft     
          : document.body.scrollLeft;     
    if (floatingMenu.targetX < 0)   
    {   
        floatingMenu.shiftX +=   
            floatingMenu.hasElement   
            ? de.clientWidth   
            : document.body.clientWidth;   
    }   

    floatingMenu.shiftY =    
        floatingMenu.hasInner   
        ? pageYOffset   
        : floatingMenu.hasElement   
          ? de.scrollTop   
          : document.body.scrollTop;   
    if (floatingMenu.targetY < 0)   
    {   
        if (floatingMenu.hasElement && floatingMenu.hasInner)   
        {   
            // Handle Opera 8 problems   
            floatingMenu.shiftY +=   
                de.clientHeight > window.innerHeight   
                ? window.innerHeight   
                : de.clientHeight   
        }   
        else  
        {   
            floatingMenu.shiftY +=   
                floatingMenu.hasElement   
                ? de.clientHeight   
                : document.body.clientHeight;   
        }   
    }   
}   

floatingMenu.calculateCornerX = function()   
{   
    if (floatingMenu.targetX != 'center')   
        return floatingMenu.shiftX + floatingMenu.targetX;   

    var width = parseInt(floatingMenu.menu.offsetWidth);   

    var cornerX =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner   
           ? pageXOffset   
           : document.documentElement.scrollLeft) +    
          (document.documentElement.clientWidth - width)/2   
        : document.body.scrollLeft +    
          (document.body.clientWidth - width)/2;   
    return cornerX;   
};   

floatingMenu.calculateCornerY = function()   
{   
    if (floatingMenu.targetY != 'center')   
        return floatingMenu.shiftY + floatingMenu.targetY;   

    var height = parseInt(floatingMenu.menu.offsetHeight);   

    // Handle Opera 8 problems   
    var clientHeight =    
        floatingMenu.hasElement && floatingMenu.hasInner   
        && document.documentElement.clientHeight    
            > window.innerHeight   
        ? window.innerHeight   
        : document.documentElement.clientHeight   

    var cornerY =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner     
           ? pageYOffset   
           : document.documentElement.scrollTop) +    
          (clientHeight - height)/2   
        : document.body.scrollTop +    
          (document.body.clientHeight - height)/2;   
    return cornerY;   
};   

floatingMenu.doFloat = function()   
{   
    var stepX, stepY;   

    floatingMenu.computeShifts();   

    var cornerX = floatingMenu.calculateCornerX();   

    var stepX = (cornerX - floatingMenu.nextX) * .07;   
    if (Math.abs(stepX) < .5)   
    {   
        stepX = cornerX - floatingMenu.nextX;   
    }   

    var cornerY = floatingMenu.calculateCornerY();   

    var stepY = (cornerY - floatingMenu.nextY) * .07;   
    if (Math.abs(stepY) < .5)   
    {   
        stepY = cornerY - floatingMenu.nextY;   
    }   

    if (Math.abs(stepX) > 0 ||   
        Math.abs(stepY) > 0)   
    {   
        floatingMenu.nextX += stepX;   
        floatingMenu.nextY += stepY;   
        floatingMenu.move();   
    }   

    setTimeout('floatingMenu.doFloat()', 20);   
};   

// addEvent designed by Aaron Moore   
floatingMenu.addEvent = function(element, listener, handler)   
{   
    if(typeof element[listener] != 'function' ||    
       typeof element[listener + '_num'] == 'undefined')   
    {   
        element[listener + '_num'] = 0;   
        if (typeof element[listener] == 'function')   
        {   
            element[listener + 0] = element[listener];   
            element[listener + '_num']++;   
        }   
        element[listener] = function(e)   
        {   
            var r = true;   
            e = (e) ? e : window.event;   
            for(var i = element[listener + '_num'] -1; i >= 0; i--)   
            {   
                if(element[listener + i](e) == false)   
                    r = false;   
            }   
            return r;   
        }   
    }   

    //if handler is not already stored, assign it   
    for(var i = 0; i < element[listener + '_num']; i++)   
        if(element[listener + i] == handler)   
            return;   
    element[listener + element[listener + '_num']] = handler;   
    element[listener + '_num']++;   
};   

floatingMenu.init = function()   
{   
    floatingMenu.initSecondary();   
    floatingMenu.doFloat();   
};   

// Some browsers init scrollbars only after   
// full document load.   
floatingMenu.initSecondary = function()   
{   
    floatingMenu.computeShifts();   
    floatingMenu.nextX = floatingMenu.calculateCornerX();   
    floatingMenu.nextY = floatingMenu.calculateCornerY();   
    floatingMenu.move();   
}   

if (document.layers)   
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);   
else  
{   
    floatingMenu.init();   
    floatingMenu.addEvent(window, 'onload',   
        floatingMenu.initSecondary);   
}   

//--></script> [/codebox]

Opa.. seguinte:

Para evitar essa sobreposição, cria a div pai com os elementos que serão fixos, define nela a largura em porcentagem e a largura mínima em pixels....

Pra ficar mais claro:

[code]<div style="position: fixed; width: 90%; min-width: 820px;">   <!-- aqui vão os elementos flutuantes --> </div>[/code]

Só não sei se funciona em IE(ca)

Editado Novembro 20, 2008 por fercosmig
Adicionar tag's :: fercosmig

[Gigabyte]

É.... mais ou menos.. rs

Como o meu FF tá cheio de lixo nas barras, a área útil tá pequena e por isso eu consigo arrastar infinitamente a barra de rolagem! Esse efeito ocorre também se você redimensiona o navegador!

O script é bom, mas vale a pena tratar esse bug!