标签: sticky

有没有人有任何运气适应PinnedHeaderListView,以便它可以与ExpandableListView一起使用,而不仅仅是一个带索引部分的简单ListView？我基本上想要一个ExpandableListView每个组项视图保持固定在顶部的位置,直到它被下一个组视图向上推.

我研究了代码,试图弄清楚PinnedHeaderListView它是如何工作的,似乎很难适应ExpandableListView.主要问题似乎在于使用不同类型的适配器和绘图方法.A PinnedHeaderListView用于SectionIndexer跟踪部分位置.当它绘制每个项目时getView(),检查项目是否是新部分的开头.如果该项目是新部分的开头,则会在项目list_item视图中显示部分标题.一个ExpandableListAdapter具有getChildView()和getGroupView()单独绘制的项目和部分不同的列表项.

我确信必须有一些方法来使用这种方法PinnedHeaderListView来获得类似的行为ExpandableListView,但我不知道从哪里开始.

我有一个随时间变化的图表(通常,添加了新节点).我需要多次重新生成图形,并希望所有节点都保持原样.当使用graphviz和fdp-algorithm,设置pin-flag并使用-argument指定位置时,这部分pos有效.

在大多数情况下,这非常有效.但特别是当添加新节点时,布局有时会发生巨大变化 - 我需要避免这种情况.是否可以选择实际强制这些固定位置？它可能会导致一个丑陋的图形,这将是正常的 - 但它们只需要坚持.

位置:据说粘在firefox中工作,但我没有看到我的侧边栏.

我的HTML看起来像这样:

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

我的css:

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

当我向下滚动侧边栏时,滚动内容.它不坚持.任何人都知道可能是什么问题？

尝试创建一个始终坚持网站顶部的菜单.跟随zurb.foundation的文档,但.sticky的行为总是出乎意料的方式.或者也许我没有明显的一些？

请在这里查看重建:http: //codepen.io/mister-hansen/pen/wMgrPm

如果站点向下滚动,并且达到初始视口的精确高度,则粘滞插件会将元素.sticky从is-stuck is-at-top:更改为:.is-anchored .is-at-bottomso .sticky消失.

谢谢.

更新 文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行为.由于默认主体{height:100%} css,主体完全按最大值解释.视口高度.

所以在我的情况下解决方案是a)用auto替换body的高度.但更好b)避免对预期的固定标头使用粘性功能.

我正在使用语义中的组件来创建顶级菜单+ breadcrumb标头.出于某种原因,当尝试从最顶部位置滚动时,滚动条会"跳跃"

沙箱https://codesandbox.io/s/y7k3zn5qn1

我没有提供context粘性组件的道具.在示例中,它们始终提供封闭的React DOM引用div作为Sticky组件的上下文prop .关于context道具的目的,文件不清楚.(它说"粘性元素应该坚持的上下文")

我是否需要为粘性组件提供上下文支持以停止"跳转"滚动？如果是这样,我如何决定哪个封闭div ref作为上下文道具？

这是如何使用侧边栏创建导航栏的一个很好的示例.任何人都可以修改代码,以便顶部导航是顶部固定的,侧边栏固定/静态只有主页内容滚动？我可以通过分配class="fixed-top"到导航器使导航器顶部固定nav,但我无法弄清楚如何使侧边栏固定,以便它保持在同一位置而不是向上滚动主页面内容.应用于class="sticky-top"侧边栏似乎不起作用.

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
        <ul class="list-group sticky-top">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

https://www.codeply.com/go/LFd2SEMECH

当我阅读有关MDN position属性的文章时，这是一个问题。我认为此处sticky描述的行为与实际行为之间存在明显的差异。

根据MDN，固定位置元素将被视为相对位置元素，直到超过指定的阈值为止；当超过阈值时，它们将被视为固定位置元素，直到达到父元素的边界为止（Link）。

粘性定位可以看作是相对定位和固定定位的混合体。粘性定位的元素将被视为相对定位，直到其超过指定的阈值为止，在该点处将其视为固定的，直到其到达其父对象的边界为止。例如...

#one { position: sticky; top: 10px; } 

Run Code Online (Sandbox Code Playgroud)

...将相对位置为id的元素定位到视口滚动之前，以使元素距离顶部小于10个像素。超过该阈值，该元素将从顶部固定为10个像素。

因此，我创建了以下代码并确认了操作。

#one { position: sticky; top: 10px; } 

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.container>* {
  width: 100%;
}

header {
  background: #ffa;
  height: 130vh;
}

main {
  background: #faf;
  height: 210vh;
}

footer {
  background: #faa;
  height: 8vh;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

根据MDN文章，此代码“是相对放置元素，直到通过滚动视口使元素的位置离视口底部小于0px为止，并且当它离底部大于0px时成为固定的放置元素“ 我刚在想。

但是，结果是“滚动到固定位置元素，直到通过滚动视口使元素的位置从视口的下端开始小于0px为止，并且当从下视点大于0px时成为相对排列的元素结束”。 …

将css属性位置设置为sticky会导致元素相对定位,直到某个点也滚动为止,此时它将变为固定.如何实现反向,即元素固定直到某个点变为相对.

为了扩展,想象一下,我有一个大的页脚,高度为500像素,最初是在视口之外.我想要一个最初落在页面底部的按钮,但是,如果页脚进入视图,则按钮应保持在页脚上方.

据我所知，在离开框架之前，粘性位置会粘在它的容器上。

我的问题是我有一些嵌套的容器和其中的粘性元素，并希望它坚持它的祖父母。

有人可能会建议我会冒泡我内心的粘性孩子，但问题是它必须留在它的父级内部，因为父级是一个包含两个元素的 flexbox，我希望其中一个元素具有粘性，同时允许另一个元素在溢出时滚动。

一个示例 html：

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

和样式：

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
}

假设它main-container是可滚动的并且inner-container正在滚动。

我知道css没有支持明确的解决方案，问题是是否有任何技巧可以处理它。

我正在尝试使用此处Core UI's找到的反应模板构建反应仪表板。

CSS

.top-stick {
    position: sticky !important;
    position: -webkit-sticky;
    top: 5rem;
    overflow-y: auto;
    height: calc(100vh - 5rem);
}

JSX

<div className="animated fadeIn">
  <Row className="app-scrollable-body">
    <Col xs="12" sm="4" md="3" className="top-stick">
      <Card className="toic">
        <CardBody>
          Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
    <Col xs="12" sm="8" md="9">
      <Card>
        <CardHeader>Card title</CardHeader>
        <CardBody>
        Lorem ipsum dolor sit amet
        </CardBody>
      </Card>
    </Col>
  </Row>
  <div className="app-fixed-footer">
    <span>
      <a href="https://coreui.io">CoreUI</a> &copy; 2018
      creativeLabs.
    </span>
    <span className="ml-auto">
      Powered by{" "}
      <a href="https://coreui.io/react">CoreUI for React</a>
    </span> …