javascript - 我如何使用这段代码让 div 粘在屏幕顶部？

Question

下面的代码是我正在使用的测试代码。当蓝色条到达顶部时，它应该会粘在屏幕顶部。

这适用于我的浏览器，但我在这里的原因是因为当它粘在顶部时，它突然变小了。如您所见，蓝色条以容器的全宽开始，但在我的计算机/浏览器上，在它粘在顶部后，div 会缩小到文本的大小。

更糟糕的是，我无法在 jfiddle 上重现该问题，因为在 jfiddle 中它根本不起作用! (图像只是用来创建一个滚动)。

这是 jfiddle

这是 jquery:

var titlePosition = $('.title').offset().top;


    $(window).scroll(function () {
    var scrollBar = $(this).scrollTop();

    if (scrollBar > titlePosition) {
        $('.title').css("top", "0px");
        $('.title').css("position", "fixed");

    } else {
        $('.title').css("position", "relative");
    }
    });

Answer 1

试试这段代码:

Fiddle

CSS:

.title {
    font-size:200%;
    background-color:blue;
    width:100%
}