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 Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By Jack Oliveira
      Ola pessoal boa noite me veio uma duvida sobre Informações em JSON
      bom tenho um dominio principal que contem todas as informações 
      deste dominio quero uma forma que outras site receba as notificações de novos post etc...
      Ex: meudominiomaster.com
      dominiocliente.com
       
      meu html e o json esta assim
       
      <?php //ESTE FICARAR NO PAINEL DO CLIENTE $json = file_get_contents("https://meusitemaster.com/sites-novos.php"); $json_output = json_decode($json, true); foreach($json_output as $InfoJson){ $UrlJson=''.ConfigPainel(url_base_json.'; } ?> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" style="background-color:transparent; margin-bottom:25px;"> <div class="card"> <div class="card-header white"><strong> <?= $InfoJson['titulo']; ?> <span class="btn btn-primary float-right">Novo na Loja</span></strong></div> <div class="card-body p-0"> <img class="img-fluid" src="<?= $UrlJson; ?>assets/imagens/<?= $InfoJson['banner']; ?>" /> <ul class="list-group list-group-flush no-b"> <li class="list-group-item"> <i class="icon icon-calendar text-blue"></i>Data: <?= $InfoJson['data']; ?> </li> </ul> </div> <div class="card-footer white text-center"> <a class="btn btn-sm btn-primary tooltips" target="_blank" href="_blank" data-tooltip="Comprar <?= $InfoJson['titulo']; ?>"><i class="icon-shopping_cart"></i></a> </div> </div> </div> <?php }} ?> Minha duvida é teria outra forma de fazer isso em json?? ou seja mais profissional?
    • By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

    • By JohnDann
      Galera, estou com um problema chato em um código HTML aqui.
      Toda vez que a página abre, o ADS só fica visível por poucos segundos,
      e logo desaparece.
      É um template free que eu peguei da internet.
      Podem me ajudar?
      Não consegui anexar o arquivo XML, então vou deixar o link aqui para vocês.
      https://testandoblog03a.blogspot.com
    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
×

Important Information

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