Jump to content
PedroHRLeite

não consigo utilizar position: sticky como eu queria

Recommended Posts

Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?

<!DOCTYPE html>
<html>
<head>
    <style>
        .wideBody .side-column {
            float: right;
            order: 2;
            width: 300px;
        }              
                .wideBody .side-column footer {
                    position: sticky;
                    position: -webkit-sticky;
                    top: 0;
                }
        .wideBody .main-column {
            align-self: flex-start;
            float: left;
            width: 500px;
            border: 2px solid #4CAF50;
        }
        .resultados {
            border: 2px solid #4CAF50;
            margin-bottom:25px;
            position:relative;
        }
        footer {
            border: 2px solid #4CAF50;
        }
        </style>
</head>
<body class="wideBody">
    <main>
        <div>
            <div class="main-column">
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
                coluna principal<br />
            </div>
            <aside class="side-column">
                coluna auxiliar
                <div class="resultados">
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                    1 -> 2<br />
                </div>
                <footer>
                    rodape fixo
                </footer>
            </aside>
        </div>
    </main>
</body>
</html>

 

Share this post


Link to post
Share on other sites
6 horas atrás, PedroHRLeite disse:

Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página

Hã?!!!! Rodapé fixo no topo, mas quando alcança o topo fica no topo? Mas ele já não estaria no topo?

Explica direito isso aí

 

A propósito para quê tantas tag's break? "<br />" Não seria mais simples usar "margin-bottom"

Share this post


Link to post
Share on other sites

Resolvido

Consegui fazer o que eu queria, obrigado, esse código é apenas um exemplo, um teste, por isso não estava me preocupando muito com as tags de quebra de linha, mas obrigado amigo, segue o código funcionando: 

 

<!DOCTYPE html>
<html>
<head>
    <style>
        
        .wideBody .main-content {
            display: flex;
            justify-content: space-between
        }
            .wideBody .side-column {
                float: right;
                order: 2;
                width: 300px;
            }

                .wideBody .side-column footer {
                    position: sticky;
                    position: -webkit-sticky;
                    top: 0;
                }

            .wideBody .main-column {
                align-self: flex-start;
                float: left;
                width: 500px;
                border: 2px solid #4CAF50;
                height: 5000px
            }

            .resultados {
                border: 2px solid #4CAF50;
                margin-bottom: 25px;
                position: relative;
                height: 120px
            }

            footer {
                border: 2px solid #4CAF50;
                height:100px;
            }
        </style>
</head>
<body class="wideBody">
    <div class="main-content">
        <div class="main-column">
            coluna principal<br />
        </div>
        <aside class="side-column">
            coluna auxiliar
            <div class="resultados">
                Resultados
            </div>
            <footer>
                rodape fixo
            </footer>
        </aside>
    </div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By Kaio Kdesigner
      Oi pessoal, estou tentando alinhar o titulo no meu vertical da div, já vi varios tutoriais sobre "vertical-align e  display: table-cell" mas nada funciona, alguém poderia me ajudar??
       
       
      Como esta:
      https://ibb.co/6grR6zP
       
      Meu CSS:
       
      .category-noticias {width:100%;background-color:#ffffff;border: 1px solid #bd67bd;} .category-noticias .thumb{float: left;width:130px; height:120px; object-fit: cover; background-color:#ffffff; padding:0px;} .category-noticias .titulo {margin-left: 158px; line-height:15pt; font-size:13pt; text-transform:uppercase; word-wrap: break-word;} .category-noticias .titulo a {font-family: lato, sans-serif;color:#64578c;text-decoration:none;}  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.