Result

jQuery

var bt = $("#box").offset().top; // boxのページ上からの距離を取得
var ds = 0;

$(document).scroll(function(){ // スクロール発生時の処理の記述を開始
    ds = $(this).scrollTop(); // ユーザのスクロールした距離を取得

    if (bt <= ds) {  // スクロール距離がboxの位置を超えたら、
        $("#box").addClass('follow'); // 「follow」というclassを追加する
    } else if (bt >= ds) { // スクロールがページ上まで戻ったら、
        $("#box").removeClass('follow'); // classを削除
    }
});

css

  #content {
    position: relative;
    background: u#333;
    height: 3000px;
}
#box {
    position: absolute;
    top: 250px;
    background: #333;
    width: 100%;
    padding: 30px 0;
    text-align: center;
    color: white;
}
#content .follow {
    position: fixed;/*スクロールで付加されるclass*/
    top: 0;
}

html

<div id="content">
<div id="box">fixed</div>
</div>

via

KAYAC DESIGNER’S BLOG

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7