1

我很困惑，

我创建了一个固定的标题（黄色条），它使用 jquery 卡入到位（黑色条下方），

效果很好，唯一的问题是当（黄色条卡入到位）时，第一张图片会跳到页面的一半

至关重要的是，这是一个流畅的过程，因为用户将无法正确查看前几张图像。

我添加了一个小提琴来模拟我的网站上发生的事情，尽管在网站上跳跃要糟糕得多。请查看小提琴，当它们碰到黄色条时，您会看到图像略微向上跳跃。

我希望这是有道理的。感谢所有帮助！，

没有大力支持就做不到！！！！

http://jsfiddle.net/f95sw/6/

干杯

保罗

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');
    }
});
4

1 回答 1

0

修复图像“跳跃”

问题是在将元素设置为fixed您将其从页面流中取出。要对此进行调整，您需要在页面body标签上添加额外的填充以解决缺失的 30px（固定元素的高度）。

为此，我在正文中添加了“固定”类：

$('body').addClass('fixed');

然后，我通过更改.fixed为：更改了您的 CSS 以保留元素的固定位置.fixed .sticky-header：

.fixed .sticky-header { ... }

然后我添加padding-top了body.fixed等于您的固定元素的高度：

body.fixed {
    padding-top:30px;
}

JSFiddle 演示。

附加修复

值得记住的是，由于顶部的红色条也是固定的，您还需要考虑它的高度，以防止它与蓝色的“容器”分隔线重叠。我已经在这个更新的 JSFiddle 演示中为您完成了该操作：

body {
    padding-top:52px; /* Red bar height */
    margin:0; /* Clear default browser margin */
}

body.fixed {
    padding-top:82px; /* Red bar height + yellow bar height */
}
于 2013-10-04T08:33:44.000 回答