Div flutuante ?

Front-end

07/02/2013

Ola pessoal....

Como eu faço para uma div ficar flutuante igual a div de avaliação quando nos entramos em um curso (https://www.devmedia.com.br/curso/curso-integrando-aplicativos-asp-net-c-com-redes-sociais-twitter-e-facebook/363 no camto direito tem um espaço de avalição, como eu faço para uma div ter esse mesmo efeito de quando eu descer a barra de rolagem a div colar no topo e depois quando eu subir a pagina a div voltar para o seu lugar? )

Vlw...
Ari Lima

Ari Lima

Curtidas 0

Respostas

Danilo Gomes

Danilo Gomes

07/02/2013

Não sei se ajuda a esclarecer, mas acho que refere-se ao css: 
position: fixed;


http://www.cssnolanche.com.br/diferenca-entre-position-static-relative-absolute-e-fixed/
GOSTEI 0
Ari Lima

Ari Lima

07/02/2013

se eu colocar position: fixed a dvi vai fixa na tela, ou seja ela não vai ter o efeito....eu sei que é algo com jquery, mas não sei como faz .....


https://www.devmedia.com.br/curso/curso-de-criacao-de-web-sites-com-bootstrap/366 no canto direito a div avaliação ela não é fixed é alguma coisa com jquery para dar o efeito de quando descer a pagina a div colar no topo da pagina ?
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

Cara,

Inspecionando no Chrome deu pra ver que quando ele atinge determinada altura ele muda o CSS.

Ele permuta de fixed pra relative e vice versa, e altera as margin's.

GOSTEI 0
Ari Lima

Ari Lima

07/02/2013

como que eu faço isso ?

GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

Não sei ao certo como foi feito aqui, pois o JS está minified.

Mas poderia utilizar o evento scroll, do JQuery, por exemplo.

http://api.jquery.com/scroll/
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

07/02/2013

E se usar position absolute?
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

E se usar position absolute?


Aí imagino que a div não irá acompanhar a tela junto à barra de rolagem.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

07/02/2013

Ah, correto. Perdão, eu não tinha visto esse requisito de que a div tem de rolar junto da página.
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

É, a curiosidade dele era quanto aquele link no início do tópico.

O lance é que a parte de avaliação rola até certo ponto, apenas, caso você desça ou suba a barra de rolagem.

Em um momento ela "trava", pelo que inspecionei ele realmente troca o tipo de "position" de acordo com a posição da div.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

07/02/2013

uma pergunta de iniciante, o que div flutuante???
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

07/02/2013

Marcelo, nesse caso a div flutuante é aquela que permanece fixa na tela, sobre os demais elementos. Como aquelas mensagens chatas que vão acompanhando o scroll da página.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

07/02/2013

não sabia que aquilo era uma div flutuante,
como se faz aquilo??? kkkkkk
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

Marcelo, aquilo faz-se com o position: fixed, do CSS.

A única diferença entre um position fixed e o exemplo do Ari Lima, é que existe um momento em que a div pára.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

07/02/2013

certo, mas como colocar sobre o site?
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

Marcelo, não entendi muito bem.

Veja se isto lhe ajuda: [url]http://www.cssnolanche.com.br/diferenca-entre-position-static-relative-absolute-e-fixed[/url]
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

07/02/2013

por exemplo, tenho la meu site, com html, css...ok?

aew quero que na hora que o site abrir apareça essa div flutuante com alguma informação e algum botão para fechar...
bom, é isso.

obrigado
GOSTEI 0
Danilo Gomes

Danilo Gomes

07/02/2013

É só colocar a div com position:fixed e dar a posição desejada a ela.

Para fechar terá que ter algum javascript que ao clicar dê um display:none na div.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

07/02/2013

complicou, heheheh, pode deixar algum codigo aew para eu testar?

obrigado
GOSTEI 0
José

José

07/02/2013

Insira o código abaixo de preferência dentro da tag head da sua página:
Antes de tudo devemos incluir o script flutuante.js

<script language="javascript" type="text/javascript" src="http://maximundownloads.com/js/flutuante.js"></script>

 

Depois na mesma página usaremos o script abaixo

<script language="javascript" type="text/javascript">

$(document).ready(function(){

    var y_fixo = $(divf)/*DENTRO DO PARENTESES PASSAMOS O ID DO ELEMENTO QUE FICARA FLUTUANTE NA PAGINA*/.offset().top;

    $(window).scroll(function () {

        $(divf)/*DENTRO DO PARENTESES PASSAMOS O ID DO ELEMENTO QUE FICARA FLUTUANTE NA PAGINA*/.animate({

            top: y_fixo+$(document).scrollTop()+"px"

            },{duration:100,queue:false}/*PARA DIMINUIR O TEMPO DE ROLAGEM DIMINUA A duration:*/

        );

    });

});

</script>


Abaixo vamos criar o css do elemento div:
<style type="text/css">

.divf{

    width:250px;

    height:250px;

    background-color:#006;

    position:absolute;/*IMPORTANTISSIMO! A DIV DEVE TER POSIÇÃO ABSOLUTA*/

}

.principal{

  height:2000px;

}

</style>


Depois de inserir o script na página vamos criar o elemento div que ficara flutuante:

No exemplo utilizamos uma div de class principal e definimos altura de 2000px apenas para vermos a div flutuando

<div class="principal">

<div id="divf" class="divf"> <!-- NÃO SE ESQUEÇA DE DEFINIR O ID DA DIV QUE SERA UTILIZADA E PASSAS NA FUNÇÃO JAVASCRIPT -->

</div>

</div>


Peguei esse exemplo para lhe ajudar no seguinte site : http://www.computingworld.info/artigos.php?id_=17
GOSTEI 0
POSTAR