Question

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

这适用于我的浏览器，但我在这里的原因是因为当它坚持到顶部时，它会突然变小。正如您所看到的那样，蓝色条在容器的整个宽度上开始，但在我的计算机/浏览器上，在它粘到顶部之后，div缩小到文本的大小。

更糟糕的是，我无法在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%
}

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

Answer 3

只需添加此css：

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

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

干杯

Answer 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。这应该在左上角找到。

Answer 5

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

休息看起来不错。

Answer 6

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

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

的对象

替换为：

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

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

titlePosition.top或titlePosition.left

参考：.offset（）http://api.jquery.com/offset/

Answer 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的原始宽度，然后将sticky div的宽度更改为该值的任何值。

出于某种原因，即使我在CSS中定义了原始宽度，新的粘性宽度在浏览器中仍会出现不同的大小。所以这种方法给它的宽度与原始宽度相同（无论它是什么）

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

7 个答案: