Barra que cambia de posicion al hacer scroll con el mouse, cambia la posicion del elemento a fixed, su codigo o funcion se realiza con la ayuda de javascript, es un codigo dificil de conseguir, hay variedad de codigos diferentes que permiten hacerlo, de hecho hay otros ejemplos de codigo ya diferente que hacen que cuando uno haga scroll salga una barra totalmente diferente.
posicion dos
1.crearan una carpeta llamada barrascroll donde estaran todas las subcarpetas con sus codigos,imagenes, estilos css3.
crearan entonces la primer subcarpeta llamada imagenes y pegaran esta imagen ahi adentro, esta imagen y esta barra les servira para tratar de hacer una grilla de horas como la que veran en la pagina web www.zocdoc.com donde muestran una grilla de horas un sistema de reservacion de citas medicas mejor dicho un selector de horas que es un sistema de cdalendario que pagina una semana.
2. creen un archivo llamado barra.php y peguen el codigo
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="barra.css" />
<script type="text/javascript">
function window_onload() {
window.addEventListener("scroll",navbar_reset_top,false);
}
var navbar_top=100;
function navbar_reset_top() {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>navbar_top&&navbar.className==="navbar_absolute" {
document.getElementById("navbar".className="navbar_fixed";
}
else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed" {
document.getElementById("navbar".className="navbar_absolute";
}
}
</script>
</head>
<body onload="javascript: window_onload();">
<div id="navbar" class="navbar_absolute">
<div class="flechaizquierda">
</div>
<div class="flechaderecha"></div>
</div>
<div class="content">Content
<div class="icono">
</div>
</div>
</body>
</html>
3. creen un archivo con extension .css y llamenlo barra.css y peguen este codigo
html,body {
margin: 0;
}
#navbar.navbar_fixed {
position:fixed;
top:0px;
width:536px;
height:37px;
background-color:orange;
margin-left:600px;
}
#navbar.navbar_absolute {
position:absolute;
top:100px;
width:536px;
height:37px;
background-color:orange;
margin-left:600px;
}
.content
{
height:2000px;
background-color:#f5f2ef;
}
.flechaizquierda
{
position:absolute;
top:6px;
left:6px;
width:23px;
height:24px;
background-image: url("./imagenes/flechas.png";
background-position:0 0;
background-color:;
background-repeat:no-repeat;
cursor:pointer;
}
.flechaderecha
{
right:6px;
top:6px;
position:absolute;
width:23px;
height:24px;
background-color:;
background-position:0 -24px;
background-repeat:no-repeat;
background-image:url("./imagenes/flechas.png";
cursor:pointer;
}
posicion dos
1.crearan una carpeta llamada barrascroll donde estaran todas las subcarpetas con sus codigos,imagenes, estilos css3.
crearan entonces la primer subcarpeta llamada imagenes y pegaran esta imagen ahi adentro, esta imagen y esta barra les servira para tratar de hacer una grilla de horas como la que veran en la pagina web www.zocdoc.com donde muestran una grilla de horas un sistema de reservacion de citas medicas mejor dicho un selector de horas que es un sistema de cdalendario que pagina una semana.
2. creen un archivo llamado barra.php y peguen el codigo
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="barra.css" />
<script type="text/javascript">
function window_onload() {
window.addEventListener("scroll",navbar_reset_top,false);
}
var navbar_top=100;
function navbar_reset_top() {
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>navbar_top&&navbar.className==="navbar_absolute" {
document.getElementById("navbar".className="navbar_fixed";
}
else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed" {
document.getElementById("navbar".className="navbar_absolute";
}
}
</script>
</head>
<body onload="javascript: window_onload();">
<div id="navbar" class="navbar_absolute">
<div class="flechaizquierda">
</div>
<div class="flechaderecha"></div>
</div>
<div class="content">Content
<div class="icono">
</div>
</div>
</body>
</html>
3. creen un archivo con extension .css y llamenlo barra.css y peguen este codigo
html,body {
margin: 0;
}
#navbar.navbar_fixed {
position:fixed;
top:0px;
width:536px;
height:37px;
background-color:orange;
margin-left:600px;
}
#navbar.navbar_absolute {
position:absolute;
top:100px;
width:536px;
height:37px;
background-color:orange;
margin-left:600px;
}
.content
{
height:2000px;
background-color:#f5f2ef;
}
.flechaizquierda
{
position:absolute;
top:6px;
left:6px;
width:23px;
height:24px;
background-image: url("./imagenes/flechas.png";
background-position:0 0;
background-color:;
background-repeat:no-repeat;
cursor:pointer;
}
.flechaderecha
{
right:6px;
top:6px;
position:absolute;
width:23px;
height:24px;
background-color:;
background-position:0 -24px;
background-repeat:no-repeat;
background-image:url("./imagenes/flechas.png";
cursor:pointer;
}