0

Eu tenho uma div que tem position: fixed, ou seja, acompanha o scroll. Mas tenho um problema. Visto que a div tem texto com uma cor, se passar por cima de uma div que esteja mais escura, o texto não será visível. Existe alguma forma de aplicar na css ou js para quando ele chegasse a essa div mudasse para outra cor?

Este é o código que tenho:

<div style="position:fixed;right:10px;top: 50%;transform: translateY(-50%);"><i class="fa fa-chevron-right fa-5x"></i></div>

Sei que não devo utilizar style na linha mas como é só enquanto fase de testes, estou a fazer assim para a mais fácil manipulação do código.

Ouvi falar do método mix-blend-mode mas não consegui pô-lo em prática. Como é que conseguiria utilizar esse método?

6
  • Um jeito de fazer isso é calcular o scrollTop da do window/body e o scrollTop do texto estático. e verifica se está no scroll desejado, caso sim aplica a css.
    – Marcelo
    Commented 1/02/2018 às 15:54
  • Leia isso aqui e veja se ajuda: developer.mozilla.org/pt-BR/docs/Web/API/Element/…
    – Marcelo
    Commented 1/02/2018 às 15:56
  • Só um z-index para jogar essa div fixa para cima de todo o conteúdo não resolveria seu problema? Ela tem alguma cor de Background, ou só o texto?
    – hugocsl
    Commented 1/02/2018 às 16:08
  • @hugocsl Eu tenho uma div mais escura com um fundo escuro. A suposta div presa ao scroll é aquela indicada no código Commented 1/02/2018 às 16:11
  • Cara está meio difícil de entender, se vc puder colocar o código completo do HTML e CSS vai ficar mais fácil para te dar uma resposta precisa.
    – hugocsl
    Commented 1/02/2018 às 16:32

1 Resposta 1

-2

Utilize o :hover conforme exemplo abaixo:

HTML

<html>
  <head>
    <title>Exemplo alteração de cor do texto</title>
  </head>
  <body>
    <div class="divMain">Seu texto aqui</div>
    Conteudo do site
  </body>
</html>

CSS

.divMain {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: black;
}

.divMain:hover {
  color: red;
}

Você pode ver em https://jsfiddle.net/mytq5y68/

2
  • Cara ele não quer o efeito no :hover, ele quer no evento do Scroll do navegador!
    – hugocsl
    Commented 1/02/2018 às 16:06
  • Não era isto que eu queria, não é para ter o efeito de quando ele passa o rato na div, mas sim quando ela toca noutra div Commented 1/02/2018 às 16:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .