Como deixar um menu fixo após rolar o scroll da tela


Veja abaixo, um código simples de como deixar um menu fixo após rolar o scroll da tela

<script type="text/javascript">
window.onscroll = scroll;
function scroll () {
 var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;if(nVScroll > 100 ){
document.getElementById("divmodulos").style.position = "fixed";}else
{document.getElementById("divmodulos").style.position = "relative";}}
</script>


<h1>role a barra de rolagem para testar<h1>
<h2>role a barra de rolagem para testar<h2>
<h3>role a barra de rolagem para testar<h3>

<div id='divmodulos' style='position: relative;padding:5px;background-color:#FFCC00;z-index:200000000;top:0px;right:0px;'> <h2 align='right'><a href='#modulos'>+ Ver índice</a></h2></div><ul>


role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
<a name='modulos'></a>
<h1 style='background-color:red;'>depois de clicar em índice venha aqui</h1>

role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>
role a barra de rolagem<hr>



Categoria: html, javascript | Tags: , , , | Postado por joemaster em 02/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *