实现吸顶效果

纯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");
    }
    });