如何使用此代码使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

试试这个代码：

小提琴

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 。 此外， 还有一些优化 。

我更喜欢追加/删除类以将所有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的原始宽度，然后将粘滞div的宽度更改为该值。

由于某些原因，即使我在CSS中定义了原始宽度，新的粘性宽度在浏览器中仍然会以不同的大小显示。 因此，此方法将使其宽度与原始宽度相同（无论它是什么）