web-dev-qa-db-ja.com

Semantic UI（React）でスティッキーバーを作成します。スクロールするとページがジャンプします

セマンティックでコンポーネントを使用して、トップメニューとブレッドクラムヘッダーを作成しています。何らかの理由で、最上部の位置からスクロールしようとすると、スクロールバーが「ジャンプ」します。

サンドボックス https://codesandbox.io/s/y7k3zn5qn1

スティッキーコンポーネントにcontextプロップを提供していません。 examples では、divコンポーネントへのコンテキストプロパティとして、囲んでいるStickyのReact DOM参照）を常に提供しています。ドキュメントは、context小道具の目的について明確ではありません（「スティッキー要素が固執する必要があるコンテキスト」と書かれています）

「ジャンプ」スクロールを停止するために、スティッキーコンポーネントにコンテキストプロップを提供する必要がありますか？もしそうなら、コンテキストプロップとして提供する囲んでいるdiv refをどのように決定しますか？

semantic-uistickysemantic-ui-react
8
PrashanD

Railsコンポーネントを使用して、スティッキーコンポーネントをラップし、パディング/マージンオフセットを兄弟に適用しました。レールにより、スティッキーは親divの一部ではなく、オーバーレイのように機能します。カスタムを追加するだけです。デフォルトの動作をオーバーライドするには、レールにcssします。Contextrefを使用すると、その要素のコンテキスト全体でスティッキーをスタックできます。

コードサンドボックスにいくつかの変更を加えました スティッキーメニューの例

3
Eva Raymond

スクロールすると、position:fixed;が<div class="ui inverted menu">の-​​親に追加されます。これにより、要素がdom構造から移動し、占有していたスペースが削除されます。したがって、兄弟はジャンプして空き領域を占有します。

回避策として、位置が固定に設定されているときに、手動でmargin-topを兄弟に追加できます。

3
Gibin Ealias

自分で解決しました。上記のソリューションのようにレールを追加しようとしましたが、機能しませんでした。

私にとっての問題は、使用していた事前レンダリングライブラリであることに気づきました。事前レンダリングライブラリを削除するのではなく、active属性をStickyに追加しました。デフォルトではfalse（状態に保存）です。 。次に、3秒の遅延の後、オンにしました（状態のactive属性をactiveに設定します）。 3秒を選択したのは、事前レンダリングが各ページを構成するのにかかった時間だと思うからです（これがどのように行われるかについての詳細は正確には知らされていません）。

お気に入り：

componentDidMount() {
    ...
    //Enable sticky functionality after delay
    setTimeout(function() { //Start the timer
        this.setState({
          controls: {
            ...this.state.controls,
            isStickyActive: true,
          }
        }) //After 3 seconds, set isStickyActive to true
    }.bind(this), 3000);
    ...
}
0
Nikola Tesla