吸い上げ効果を実現

純CSSで吸頂効果を実現
粘性位置決めは、相対位置決めと固定位置決めの混合である.要素は、特定のしきい値を越える前に相対的に位置決めされ、その後、固定的に位置決めされた著作権は著者の所有に帰属する.
position:stickyはまだ実験的な属性値です.
粘性位置決めの固定位置決めは必ずしもposition:fixedではなく、目標要素の任意の親要素がposition:relative | absolute | fixed | stickyを設けていない場合にのみ、position: fixedと同様に表現される.一方、いずれかの親要素がposition:relative | absolute | fixed | stickyに設定されている場合、ターゲット要素は親要素に対して固定されます.flexboxレイアウトとともに使用すると、position: stickyは無効になります.flexboxのデフォルトでは、要素(align-items: stretch)が引き伸ばされます.つまり、サブ要素の高さは親要素の高さと同じように引き伸ばされます.align-itemsはstretchではありません.著作権は作者の所有である.
js+css吸頂効果を実現
offset()メソッドは、ドキュメントに対する選択された要素のオフセット座標を設定または返します.

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var tabOffTop = $(".course-detail-content-box").offset().top;
    //var tabWidth = $(".course-detail-content-box").width();
    if (tabOffTop < scrollTop) {
        $("#tablist").addClass("fixedNav");
        $(".fixedNav").css("left",tabOffLeft);
        //$("#tablist").css("width",tabWidth);
    }else{
        $("#tablist").removeClass("fixedNav");
    }
    });