破折号：将标签栏保持在顶部并记住标签之间的滚动位置

Question

在下面的 Dash 应用程序示例中，我有两件事要完成。

1. 保持标签栏“冻结”在应用程序的顶部，所以如果有人向下滚动到例如500行无需“向上”滚动即可轻松选择其他标签
2. 如果达到 1。 “记住”用户向下滚动的行，因此在选项卡之间切换时，它仍位于应用程序的同一行。

简化的应用程序：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

# App
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.FLATLY],
                title='TestCards')
server = app.server


# Layout
text = [[f'Row_{i}', html.Br()] for i in range(1000)]
text = [item for sublist in text for item in sublist]

tab1_content = html.Div([html.H1(f'Title Tab1'),
                         html.P(text)])

tab1 = dbc.Card(dbc.CardBody([tab1_content]))

tab2_content = html.Div([html.H1(f'Title Tab2'),
                         html.P(text)])

tab2 = dbc.Card(dbc.CardBody([tab2_content]))

app.layout = html.Div([dbc.Tabs(
    [dbc.Tab(tab1, label='Tab1'),
     dbc.Tab(tab2, label='Tab2')])])

# Run App
app.run_server(host='0.0.0.0', debug=False)

加载并向下滚动时的样子：

我想达到的目标：

Answer 1

给你的 Tabs 组件一个 id，例如：

dbc.Tabs(
    [dbc.Tab(tab1, label='Tab1'),
     dbc.Tab(tab2, label='Tab2')], id="my-tabs")

然后在你的应用中添加这个 css：

#my-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
}