none
Menu Flutuante e Fixo no Topo

    Question

  • Noite!

    Pessoal, preciso desenvolver um menu igual ao deste site onde:

    - Ao descer a tela o menu acompanha

    Depois de muito custo achei este código em JavaScript e tentei converter, mas sem sucesso.

    Consegui apenas centralizar na tela ao Max/Rest e não ao descer a tela.

    Se alguém tiver alguma idéia ou local onde eu possa obter exemplos... Ficarei agradecido!!!!

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="menuFlutuante.aspx.vb" Inherits="menuFlutuante" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>Untitled Page</title>
    
      <script type="text/javascript">
      <!--
        floatX=50;
        floatY=50;
        layerwidth=100;
        layerheight=130;
        align="center";
        valign="top";
        delayspeed=2;
    
        NS6=false;
        IE4=(document.all);
        if (!IE4) {NS6=(document.getElementById);}
        NS4=(document.layers);
    
        function adjust() 
        {
          if ((NS4) || (NS6)) 
          {
            if (lastX==-1 || delayspeed==0)
            {
              lastX=window.pageXOffset + floatX;
              lastY=window.pageYOffset + floatY;
            }
            else
            {
              dx=Math.abs(window.pageXOffset+floatX-lastX);
              dy=Math.abs(window.pageYOffset+floatY-lastY);
              d=Math.sqrt(dx*dx+dy*dy);
              c=Math.round(d/10);
              if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
              if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
              if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
              if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
            }
            if (NS4)
            {
              document.layers['floatlayer'].pageX = lastX;
              document.layers['floatlayer'].pageY = lastY;
            }
            if (NS6)
            {
              document.getElementById('floatlayer').style.left=lastX;
              document.getElementById('floatlayer').style.top=lastY;
            }
          }
          else if (IE4)
          {
            if (lastX==-1 || delayspeed==0)
            {
              lastX=document.body.scrollLeft + floatX;
              lastY=document.body.scrollTop + floatY;
            }
            else
            {
              dx=Math.abs(document.body.scrollLeft+floatX-lastX);
              dy=Math.abs(document.body.scrollTop+floatY-lastY);
              d=Math.sqrt(dx*dx+dy*dy);
              c=Math.round(d/10);
              if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
              if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
              if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
              if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
            }
            document.all['floatlayer'].style.posLeft = lastX;
            document.all['floatlayer'].style.posTop = lastY;
          } 
          setTimeout('adjust()',50);
        }
    
        function define()
        {
          if ((NS4) || (NS6)) 
          { 
            if (align=="left") {floatX=ifloatX};
            if (align=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
            if (align=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
            if (valign=="top") {floatY=ifloatY};
            if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
            if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
          }
          if (IE4) 
          {
            if (align=="left") {floatX=ifloatX};
            if (align=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
            if (align=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
            if (valign=="top") {floatY=ifloatY};
            if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
            if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
          }
        }
      //-->
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
    
      <script type="text/javascript">
        if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
        if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
      </script>
    
      ##########################################<br />
      #   Ak Fica o Menu           <br />
      ##########################################<br />
    
      <script type="text/javascript">
        if (NS4) 
        {
          document.write('</LAYER>');
        }
        if ((IE4) || (NS6)) 
        {
          document.write('</DIV>');
        }
        ifloatX=floatX;
        ifloatY=floatY;
        define();
        window.onresize=define;
        lastX=-1;
        lastY=-1;
        adjust();
        document.write("Cadastro");
      </script>
    
      No começo deste arquivo ( a partir da 4a linha) tem o seguinte:<br>
      <br>
      floatX=10;<br>
      floatY=10;<br>
      layerwidth=100;<br>
      layerheight=130;<br>
      align="center";<br>
      valign="top";<br>
      delayspeed=3;<br>
      <br>
      <br>
      onde:<br>
      floatX é o espaço que quer da margem esquerda.<br>
      floatY é o espaço que quer da margem superior.<br>
      layerwidth é a largura da janela flutuante.<br>
      layerheight é a altura da janela flutuante.<br>
      align é o alinhamento horizontal (pode ser left, center, ou right).<br>
      valign é o alinhamento vertical (pode ser top, center, ou bottom).<br>
      delayspeed é o tempo para a janela começar a descer.<br>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      <h1>
        ....</h1>
      </form>
    </body>
    </html>
    
    vlw
    Tuesday, October 26, 2010 10:00 PM

Answers

All replies