Ejemplo 1: navegación pegajosa de CSS
nav {
position:sticky;
top:0;
}
/*Top can be replaced with bottom, left, or right
depending on what you want :) */Ejemplo 2: posición css
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}Ejemplo 3: como hacer un div pegajoso usando js
<!DOCTYPE html>
<html>
<head>
<title>
How to make make a div stick to
the top of the screen once it’s
been scrolled to?
</title>
<style>
.sticky-div {
background-color: green;
position: relative;
width: 100%;
padding: 10px 0px;
}
.start {
height: 100px;
}
.end {
height: 500px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to make make a div stick
to the top of the screen once
it’s been scrolled to?
</b>
<p class="start">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and
practice/competitive programming/company
interview Questions.
</p>
<div class="sticky-div">
This is div will stick to the top when it has been scrolled past
</div>
<p class="end">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and
practice/competitive programming/company
interview Questions.
</p>
<script>
stickyElem =
document.querySelector(".sticky-div");
/* Gets the amount of height
of the element from the
viewport and adds the
pageYOffset to get the height
relative to the page */
currStickyPos =
stickyElem.getBoundingClientRect().top + window.pageYOffset;
window.onscroll = function() {
/* Check if the current Y offset
is greater than the position of
the element */
if (window.pageYOffset > currStickyPos) {
stickyElem.style.position = "fixed";
stickyElem.style.top = "0px";
} else {
stickyElem.style.position = "relative";
stickyElem.style.top = "initial";
}
}
</script>
</body>
</html>Ejemplo 4: div de posición html
<!DOCKTYPE html> <!-- Start of coding page -->
<html> <!-- Start of html coding -->
<head> <!-- Start of head -->
<title>TITLE<title> <!-- Title -->
<script>
//JavaScript
</script>
<style>
/* CSS */
</style>
</head> <!-- End of head -->
<body> <!-- Start of body -->
<div id='mydiv' style = "position:relative; left:0px; top:100px;">
Hello!
<!-- Use that style tag to positions things, have a play around with it! -->
</div>
</body> <!-- End of body -->
<html> <!-- End of html coding -->
<!-- Add this line of code next to your id:
style = "position:relative; left:0px; top:100px;"
too let you position divs where you want them, you can even position
them ontop of other divs! -->Ejemplo 5: ajuste de la posición y del elemento en css
top: 150px;¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)