如何使用此代码使 div 贴在屏幕顶部？答案

【问题标题】：How would I make div stick to top of screen using this code?如何使用此代码使 div 贴在屏幕顶部？
【发布时间】：2014-01-07 18:41:58
【问题描述】：

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

这适用于我的浏览器，但我在这里的原因是因为当它粘在顶部时，它会突然变小。如您所见，蓝色条从容器的全宽开始，但在我的计算机/浏览器上，当它停留在顶部后，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");
    }
    });

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这个代码：

Fiddle

CSS：

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

【讨论】：

谢谢，这很有帮助。它阻止了 div 缩小，但现在它扩展了 div 太多了！如果您在向下滚动之前一直查看小提琴 ..scroll。向下滚动后，您会看到 div 扩展到页面的末尾。我希望它与第一张图像的长度相同，或者更确切地说是主 div。但是，如果我调整主 div 的大小，标题 div 仍然会扩展它的一侧。
是的！你改变了什么？边距/填充？
我将图像和标题 div 的宽度更改为 86%

【解决方案2】：

更新您的代码：

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;
}

【讨论】：

【解决方案3】：

只需添加这个 css：

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

在这里你可以工作：http://jsfiddle.net/edgarinvillegas/yPWAC/3/

干杯

【讨论】：

谢谢，这很有帮助，如上所述。它阻止了 div 缩小，但现在它扩展了 div 太多了！如果您在向下滚动之前查看小提琴并一直滚动。向下滚动后，您会看到 div 扩展到页面的末尾。我希望它与第一张图像的长度相同，或者更确切地说是主 div。但是，如果我调整主 div 的大小，标题 div 仍然会扩展它的一侧。

【解决方案4】：

也将left 设置为0。另外，some optimizations。

我更喜欢添加/删除类来将所有 CSS 放入样式表中。当代码变得庞大时，您可以避免以后出现问题（谁会在 JS 文件中查找 CSS？）。

另外，缓存对象。每次您触发scroll，您的代码都会获取DOM 中的每一个.title 并生成一个jQuery 对象。不是很理想。相反，获取所有 .title 并在每个滚动条上进行修改。

CSS：

.title.fixed {
    position:fixed;
    left:0;
    right:0;
    top:0;
}

JS：

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

win.scroll(function () {
    var scrollBar = win.scrollTop();
    if (scrollBar > titlePosition) title.addClass('fixed');
    else title.removeClass('fixed');
});

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

【讨论】：

好的，这很有帮助。我确实忽略了添加 Jquery 选项！然而，虽然这个（以及其他答案中的其他提示）似乎可以防止 div 缩小，但它现在正在扩大潜水。如果您查看小提琴（例如您的优化小提琴）..在向下滚动之前一直滚动。向下滚动后，您会看到 div 展开...

【解决方案5】：

尝试给z-index:999 或者，使用jQuery - $('.title').css("z-index", "999");

休息看起来不错。

【讨论】：

【解决方案6】：

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

.top 不是函数。 offset() 返回一个包含属性top 和left 的对象

替换为：

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

您现在可以像这样访问属性：

titlePosition.top 或 titlePosition.left

参考：.offset() http://api.jquery.com/offset/

【讨论】：

感谢您的提示。但是，问题似乎仍然存在

【解决方案7】：

感谢所有反馈。

尽管它有助于改进，但最终 div 仍在调整大小。将宽度固定为特定值反应不够灵敏。

根据所有建议，我终于偶然发现了一个解决方案：

http://jsfiddle.net/yPWAC/8/

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

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

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

我让 jquery 保持 div 的原始宽度，然后将粘性 div 的宽度更改为该值。

出于某种原因，即使我在 CSS 中定义了原始宽度，新的粘性宽度仍然会在浏览器中显示不同的大小。所以这个方法给了它和原来一样的宽度（不管它是什么）

【讨论】：