0
220
VistasHow to stick an element to the top coming from above on scrolling?
I'm looking to create two sticky nav items. The blue one starts at the bottom of the page and sticks to the top of the page. The red one starts off screen at the top and then as the first one sticks it moves down the page and also sticks to the top.
Pure CSS is the goal but I can also use javascript (React js). Thanks for any suggestions!
const Navbar = () => {
return (
<nav>
<div></div>
<div></div>
</nav>
)
}
// Render it
ReactDOM.render(
<Navbar/>,
document.getElementById("react")
);body {
margin: 0;
height: 300vh;
}
nav {
height: 50px;
display: flex;
}
nav div {
width: 100px;
height: 100%;
}
nav div:first-child {
background-color: red;
}
nav div:last-child {
background-color: blue;
}<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
const Navbar = () => {
return (
<div ></div>
)
}
// Render it
ReactDOM.render(
<Navbar/>,
document.getElementById("react")
);body {
margin: 0;
height: 300vh;
}
div{
width:100px;
height:100px;
background-color: red;
position:sticky;
top:50px;
}<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>i think using position : sticky will solve you problem and do checkout https://developer.mozilla.org/en-US/docs/Web/CSS/position
·
Juan Pablo Isaza
Denunciar
Responde la pregunta