Javascript 如何使用此代码使div粘贴到屏幕顶部？

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

这可以在我的浏览器上使用，但我之所以在这里是因为当它粘在顶部时，它突然变小了。正如您所看到的，蓝色条以整个容器的全宽开始，但在我的计算机/浏览器上，当它粘到顶部后，div收缩到与文本大小相同的大小

更糟糕的是，我无法在上重现该问题，因为在JFIDLE中它根本不起作用！（这些图像只是用来创建一个滚动条）

这是你的电话号码

以下是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");
    }
    });

更新您的代码：

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

} else {
    $('.title').css("position", "static"); //otherwise it will still get that top value and cause unwanted position;
}

只需添加以下css：

.title {
    ...
    width: 100%;   /*This does the trick*/
}

在这里，您可以使用它：

干杯

尝试以下代码：

CSS：

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

---

将

left

也设置为

0

。另外

我更喜欢附加/删除类，以便将所有CSS放在样式表中。当代码变得庞大时（谁会在JS文件中寻找CSS？）

此外，缓存对象。每次启动

滚动

，代码都会获取DOM中的每个

.title

，并生成一个jQuery对象。不是很理想。取而代之的是，获取所有

.title

，只需在每个卷轴上进行修改即可

CSS:

JS:

---

至于你的非工作小提琴，你忘了包括jQuery。应该在左上角找到。

尝试给出

z-index:999

或使用jQuery-

$（'.title'）.css（“z-index”，“999”）

剩下的看起来没问题

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

.top不是一个函数。offset（）返回一个包含属性
top
和
left

替换为：

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

您现在可以访问以下属性：

titlePosition.top
或
titlePosition.left

参考：.offset（）
感谢所有反馈

尽管这有助于改善，但最终该部门仍在调整规模。将宽度固定到特定值不够灵敏

根据所有的建议，我终于找到了一个解决方案：


我让jquery保持div的原始宽度，然后将sticky div的宽度更改为该值的任何值

出于某种原因，即使我在CSS中定义了原始宽度，新的粘性宽度在浏览器中仍然会有不同的大小。因此，此方法使其宽度与原始宽度相同（无论是什么）
感谢此提示。然而，问题似乎仍然存在，这是非常有帮助的。我确实忽略了添加Jquery选项！然而，虽然这（以及其他答案中的其他提示）似乎可以防止div缩小，但它现在正在使div扩大。如果你看小提琴（例如你的优化小提琴）…在向下滚动之前一直滚动。向下滚动后，您会看到div展开…谢谢，这很有帮助。它阻止了div的收缩，但现在它将div扩展了太多！如果你看小提琴..在向下滚动之前一直滚动。向下滚动后，您会看到div扩展到页面的末尾。我希望它的长度与第一个图像相同，或者更确切地说是主div。但是如果我调整主div的大小，标题div仍然会向外扩展。是的！你改变了什么？边距/填充？我将图像和标题的宽度更改为86%，这非常有用，如上所述。它阻止了div的收缩，但现在它将div扩展了太多！如果你看着你的小提琴，在向下滚动之前一直滚动。向下滚动后，您会看到div扩展到页面的末尾。我希望它的长度与第一个图像相同，或者更确切地说是主div。但是如果我调整主div的大小，标题div仍然会向外扩展。
var titlePosition = $('.title').offset().top;

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

var titleWidth = $('.title').width()

/*then after the div is fixed I change the width */

$('.title').css("width",titleWidth);