ブラウザウィンドウに固定されているため、固定位置は私のユースケースでは機能しません。テキストが画面の右側から外れてテキストが表示されない状態になる可能性があります。とにかく、絶対配置を使用してから、javascript で「トップ」を調整しようとしました。Firefox と Chrome では問題なく動作しますが、Safari ではスクロールするとコンテンツが揺れます。
<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div>
$(document).ready(function() {
var documentHeight = $(document).height();
$(document).scroll(function() {
var scrollTop = $(window).scrollTop();
$(".sticky").offset(function() {
$this = $(this);
var offsetTop = $this.data("offset-top");
if (scrollTop < 0) {
scrollTop = 0;
}
var newTop = offsetTop + scrollTop;
if (newTop < offsetTop) {
newTop = offsetTop;
}
// Prevents document from infinitely expanding.
var maxTop = documentHeight - $this.height();
if (newTop > maxTop) {
newTop = maxTop
}
// Prevents a bit of jitter since the current offset can be
// not precisely the initial offset. 338 Vs. 338.12931923
var currentTop = $this.offset().top;
if ( Math.abs(currentTop - newTop) >= 1 ) {
return { top: newTop }
} else {
return {}
}
});
});
})