He estado intentando como loco para que esto suceda, pero simplemente no puedo resolverlo (principiante).
Como puede ver, cuando se desplaza hacia abajo, la parte superiorla parte de la cabeza se pegará a la parte superior de la página, pero también se desbordará un poco. Esto se hace con stickyjs. También quiero hacer lo mismo con la parte inferior de la cabeza, después de desplazarme un poco para que se "hunda" unos pocos píxeles mientras se adhiere a la parte inferior de la página, así que hay más visibilidad, pero no importa lo que haga. Intenta, simplemente no ganó "t trabajo".
Si alguien pudiera ayudar, estaría agradecido.
Aquí está el código en la parte superior:
#head {
z-index:101;
display: block;
position: absolute;
bottom: 20%;
width:100%;
margin:0 auto;
right:0;
left:0;
height:85px;
background: url(../float.png) #fff 50% 50% no-repeat;
text-indent:-9999px;
overflow:hidden;
}
Aquí está el código para la parte inferior:
#footerhead {
z-index:100;
position:fixed;
left:0px;
bottom:0px;
margin:0 auto;
height:20%;
width:100%;
background:url(../footer.png) #fff 50% 0 no-repeat;
}
Y aquí está el stickyjs que lo hace pegar:
<script>
$(document).ready(function(){
$("#head").sticky({topSpacing:-70});
});
</script>
Por favor, ayúdame. :(
Respuestas
1 para la respuesta № 1Puedes usar el jQuery .scroll () función para lograr lo que estás tratando de hacer. Aquí hay un pequeño código que he creado que funcionaría perfectamente para ti:
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$("#footerhead").css("height","5%");
} else if ($(this).scrollTop() < 500) {
$("#footerhead").css("height","20%");
}
});
Lo que pasa es que si el usuario se desplaza hacia abajo 500px En su sitio web, la altura de la #footerhead div se reduce a 5% ocultando así una parte más grande de la cara y haciendo más visible el área de contenido. A continuación, cuando el usuario se desplaza hacia atrás, la altura de la #footerhead div aumenta de nuevo a 20%. También puede establecer el valor de desplazamiento desde 500px a cualquier otro valor de su elección.
0 para la respuesta № 2
Esto puede funcionar para usted:
<!doctype html>
<html>
<head>
<title>Sticky Bottom</title>
<style type="text/css">
#head {
z-index:101;
position: relative;
height:85px;
width: 100%;
background: none green;
}
#footerhead {
z-index:100;
position:relative;
height:85px;
width: 100%;
background: none red;
}
.is-sticky #footerhead {
position: fixed;
top: auto !important;
bottom: -10px;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://path_to/jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#head").sticky({topSpacing:-10});
$("#footerhead").sticky();
});
</script>
</head>
<body>
<div id="head">
HEAD
</div>
<div id="footerhead">
FOOTERHEAD
</div>
<div id="content">
<p>Content here..</p>
</div>
</body>
</html>
Podría ser un error jsticky, pero veo que agrega top: -10px a cada elemento pegajoso. Tenga en cuenta que el elemento se vuelve pegajoso y obtiene clase is_sticky solo después de desplazar hacia abajo el elemento (no puede permanecer en el pie de página).