固定在主固定头下方的固定头答案

【问题标题】：Fixed header that snaps underneath main fixed header固定在主固定头下方的固定头
【发布时间】：2013-10-03 15:32:01
【问题描述】：

我一直在与该站点上的其他一些开发人员一起解决一个问题，其中包含一个固定的标题问题。

问题

1) 当向下滚动页面时，黄色块需要捕捉到红色块。

请查看代码和演示，任何帮助将不胜感激。

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {

    if ($('body').scrollTop() > offset.top + additionalPixels) {
        $('.sticky-header').addClass('fixed');
    } else {
        $('.sticky-header').removeClass('fixed');
    }


});

【问题讨论】：

不是一个真正的答案，但您可以从 CSS-tricks 网站上Persistent Headers 上的这篇文章中学到一些东西
查看此页面，您可以使用类似于 ios 滚动视图（音乐列表）的多个标题，其中标题或分隔符将粘在页面顶部，然后在新标题/分隔符到达时被替换顶teamdf.com/web/showcasing-jquery-list-with-a-fake-iphone/147

标签： jquery css fixed

【解决方案1】：

两个问题。你没有包含一个固定的类，所以我在这个中添加了：

.fixed{
    position: fixed;
    top:52px;
}

jsFiddle example

但更重要的是，您需要将数学更改为：

if ($('body').scrollTop() > offset.top - additionalPixels) {

【讨论】：

【解决方案2】：

看起来你错过了 .fixed 类

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

这是更新后的小提琴http://jsfiddle.net/f95sW/2/

【讨论】：