Como faço para criar um elemento em uma página que sempre permanece visível, mas sai do caminho de outros elementos?

Question

Eu tenho uma página HTML que um layout bastante complexo (Veja aqui). Preciso colocar uma imagem na página que o visitante possa arrastar para qualquer lugar para que ela se lembre de onde estava. Eu implementei o recurso de marcador, mas agora preciso colocar a imagem em algum lugar onde ela possa agarrá -la facilmente.

Basicamente, eu gostaria que o elemento permanecesse abaixo do tocado à direita, mas não deveria rolar para fora da vista.

Acho que poderia usar o JavaScript para mover o elemento assim que começar a rolar para fora da vista, mas existe uma opção melhor? Posso dizer "flutuar à direita e abaixo do toc ou view.top, o que for maior"?

Ou talvez eu deva criar um cabeçalho fixo (com os links e talvez o TOC)?

Alguma outra idéia?

Answer 1

Provavelmente pode ser feito usando o jQuery, mas sempre será nervoso. Eu consideraria uma div. É claro que você pode posicionar isso abaixo do menu para que nunca seja mais alto (= mais próximo da borda superior) do que o menu e manterá sua posição.

.thingy { position: fixed; right: 0px; top: 415px; width: 256px }

Isso exigiria que não haja mais nada abaixo do menu; caso contrário, o ícone de marcador sobreporá outras coisas.

Answer 2

Se você apenas deseja que a imagem seja corrigida, mas ainda é rolável para a parte superior da janela, precisará lidar com o evento de rolagem da janela e definir a posição da imagem como corrigida quando a imagem for rolada na parte superior.

Para um exemplo disso, consulte a navegação do site QuirksMode.

Como alternativa, você pode dar o TOC inteiro position: fixed; right: 0;, dê uma largura ao TOC e dê ao teaser uma margem direita igual à largura do TOC. Não haveria requisito de JavaScript dessa maneira e você sempre teria todo o TOC visível.