El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El contenido adhesivo de la interfaz de usuario semántica permanece fijo en la ventana del navegador mientras que el resto del contenido de la ventana es visible.
El propio contexto fijo de la interfaz de usuario semántica sin ningún contexto se adhiere a su propio contexto. Es por defecto y no es necesario especificar nada. El contenido puede superponerse con el elemento adhesivo. Inicialice Sticky y utilizará su propio contexto de la siguiente manera.
Sintaxis :
$('.ui.sticky').sticky({})
Ejemplo : en el siguiente ejemplo, tenemos contenido fijo colocado dentro de un contenedor que se adhiere a su propio contexto, que es el contenedor donde se coloca.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
padding: 10px;
margin: 10px;
}
#container1 {
height: 1000px;
}
#container2 {
height: 1000px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1> GeeksforGeeks </h1>
</div>
<strong> Semantic UI Sticky to Own Context </strong>
</center>
</div>
<div class="ui segment" id="container1">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<div class="ui sticky" id="first">
<h3>First Sticky</h3>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
</ul>
</div>
</div>
<div class="ui segment" id="container2">
<h1>Welcome to GeeksforGeeks</h1>
<p>Computer science portal for geeks.</p>
</div>
<script>
$('.ui.sticky#first').sticky({})
</script>
</body>
</html>
Producción:
Interfaz de usuario semántica pegada al propio contexto
Enlace de referencia: https://semantic-ui.com/modules/sticky.html
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA