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 fijo de la interfaz de usuario semántica permanece fijo en la ventana gráfica del navegador hasta que se ve otro contenido en la ventana gráfica.
El contenido de gran tamaño fijo de la interfaz de usuario semántica ayuda a desplazarse hacia abajo en el elemento fijo cuyo tamaño es más grande que la ventana gráfica. Entonces, el adhesivo se desplaza primero hacia abajo y luego el elemento adhesivo se alinea con la esquina superior. La interfaz de usuario semántica ajusta esto automáticamente y, por lo tanto, no tiene clases ni opciones.
Sintaxis : inicialice su adhesivo de gran tamaño de la siguiente manera:
$('.ui.sticky').sticky({
context: '#container1',
})
Ejemplo : en el siguiente ejemplo, tenemos un elemento adhesivo de gran tamaño que desplazaremos hacia abajo.
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: 1500px;
}
#container2 {
height: 1000px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1> GeeksforGeeks </h1>
</div>
<strong>Semantic UI Sticky Oversized Content </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>Over Sized Sticky</h3>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
<li>Web development</li>
<li>Java</li>
<li>C#</li>
<li>C</li>
<li>C++</li>
<li>Python</li>
<li>jQuery</li>
<li>Javascript</li>
<li>Competitive Programming</li>
<li>Topic-wise Practice</li>
<li>Gate CS/IT Preparation</li>
<li>Puzzles</li>
<li>Campus Ambassador</li>
<li>Testimonials</li>
<li>Placement Course</li>
<li>Careers</li>
<li>SQL</li>
<li>HTML</li>
<li>Perl</li>
<li>Scala</li>
<li>Go</li>
<li>PHP</li>
<li>Operating System</li>
<li>Computer Networks</li>
<li>Analysis of Algorithms</li>
<li>Searching Algorithms</li>
<li>Graph Algorithms</li>
<li>Sorting Algorithms</li>
<li>Bitwise Algorithms</li>
</ul>
</div>
</div>
<div class="ui segment" id="container2">
<h1>Welcome to GeeksforGeeks</h1>
<p>Computer science portal for geeks.</p>
<div class="ui sticky" id="second">
<h3>Second Sticky</h3>
<ul>
<li>Machine Learning</li>
<li>Web development</li>
</ul>
</div>
</div>
<script>
$('.ui.sticky#first').sticky({
context: '#container1',
})
$('.ui.sticky#second').sticky({
context: '#container2',
})
</script>
</body>
</html>
Producción:
Contenido de gran tamaño fijo de interfaz de usuario semántica
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