You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.7 KiB
55 lines
2.7 KiB
---
|
|
layout : 'default'
|
|
css : ''
|
|
element : 'sticky'
|
|
elementType : 'module'
|
|
|
|
title : 'Sticky'
|
|
description : 'A sticky element sticks to the browsers viewport as page content is scrolled'
|
|
type : 'UI Module'
|
|
|
|
status : 'Undocumented'
|
|
---
|
|
|
|
<%- @partial('header', { tabs: { overview: 'Overview' } }) %>
|
|
|
|
<div class="main container">
|
|
|
|
|
|
<div class="ui active tab" data-tab="overview">
|
|
|
|
<h2 class="ui dividing header">Current Progress</h2>
|
|
<div class="ui indicating progress">
|
|
<div class="bar" style="width: 90%;">
|
|
<div class="progress">90%</div>
|
|
</div>
|
|
<div class="label">Needs Documentation</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
<div class="no example">
|
|
<h4 class="ui header">Content on Rails</h4>
|
|
<p>Sticky allows for content to stick itself to a different elements viewport, so that it remains on screen as long as its related content is visible</p>
|
|
<p>Sticky content is a common pattern for content-based websites to allow for related links, author information, footnotes, and other extra information to be displayed while a user is engaged with a section of content. The grace of a sticky element, compared to a fixed element, is that sticky content is also designed to remove itself from view when a user is no longer engaged with that section, allowing for other content sections or a footer section to appear without distraction</p>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">What's Different?</h4>
|
|
<p>Semantic's sticky component caches content positions on load then uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">DOM Mutations Observers</a> to make sure that content positions adjust as an element adjusts itself.</p>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Fixed Content Taller than the Browser</h4>
|
|
<p>In addition, SUI's component gracefully handles many edge cases of sticky content, allowing for the sticky column itself to scroll separately from the main site scrollbar if it cannot fit inside a browser viewport, binding to the top or bottom edge of the viewport when fully visible</p>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Development Progress</h2>
|
|
<div class="no example">
|
|
<p>This is an undocumented component, but is <b>mostly complete</b>.</p>
|
|
|
|
<p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
|
|
|
|
<p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|