0
217
Views¿Cómo pegar un elemento en la parte superior que viene de arriba al desplazarse?
Estoy buscando crear dos elementos de navegación fijos. El azul comienza en la parte inferior de la página y se pega a la parte superior de la página. El rojo comienza fuera de la pantalla en la parte superior y luego, cuando el primero se pega, se mueve hacia abajo en la página y también se pega a la parte superior.
Pure CSS es el objetivo, pero también puedo usar javascript (React js). ¡Gracias por cualquier sugerencia!
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 answers
Answer question0
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>creo que usar position: sticky resolverá su problema y realizará el pago https://developer.mozilla.org/en-US/docs/Web/CSS/position
·
Juan Pablo Isaza
Report
Answer question