位置のある移動オブジェクトの遷移：固定？

Question

これは簡単な問題だと思われますが、私は決してCSSの専門家ではありません。私はそれを理解しようと壁に頭を打ちました。ですから、私はContentHeader要素を持っています。ユーザが特定のポイントを下にスクロールすると、NavigationHeader要素をカバーするようにスライドします。私はContentHeaderの位置を "content-header"から "content-header top"に変更することで、ContentHeaderの位置を変更していますが、ContentHeaderは円滑に移行するのではなく新しい位置にジャンプします。これは私が現在使用しているCSSです：

.content-header { 
    position: fixed; 
    top: 50; 
    width: inherit; 
    z-index: 1030; 
    padding: 12px 15px 12px 15px; 
    transition: top 1s linear; 
} 
.content-header.top { 
    top: 0; 
} 

JavaScriptを確認する必要がある場合は、私に知らせて、私はそれにも追加することができますが、それは基本的にやっている...

<section className={className} ... 

... classNameの値は、ContentHeaderの配置場所によって異なります。 Reactレンダリングブロック内でこの問題が起こっていて、それが遷移をスキップしていた問題が考えられましたが、再レンダリングを強制しないonClickイベントでクラスを変更しようとしましたが、結果は同じでした。誰かが助けることができたら、私はそれを感謝します！

Answer 1

あなたはそれがよりパフォーマンスだから、私はtransform: translateY();代わりのtopを使用するであろう、と述べたtop: 50px;

$('button').on('click', function() { 
 
    $('h1').toggleClass('top'); 
 
})

.content-header { 
 
    position: fixed; 
 
    top: 50px; 
 
    width: inherit; 
 
    z-index: 1030; 
 
    padding: 12px 15px 12px 15px; 
 
    transition: top 1s linear; 
 
} 
 

 
.content-header.top { 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="content-header">header</h1> 
 
<button>click</button>

をお読みくださいあなたのtop値、上pxを逃しています。 transitionまたはanimationとtransformを使用するとGPUアクセラレーションが得られます。移行する場合はtopになりません。

$('button').on('click', function() { 
 
    $('h1').toggleClass('top'); 
 
})

.content-header { 
 
    position: fixed; 
 
    transform: translateY(50px); 
 
    width: inherit; 
 
    z-index: 1030; 
 
    padding: 12px 15px 12px 15px; 
 
    transition: transform 1s linear; 
 
} 
 

 
.content-header.top { 
 
    transform: translateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="content-header">header</h1> 
 
<button>click</button>

Answer 2

最初のtopの値を1単位（たとえば、top: 50px）にしてみてください。

.content-header { 
    position: fixed; 
    top: 50px; // add `px` unit here 
    width: inherit; 
    z-index: 1030; 
    padding: 12px 15px 12px 15px; 
    transition: top 1s linear; 
}