Question

我很困惑，

我已经使用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');
    }
});

Answer 1

修复图像“跳转”

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

为此，我将“固定”类添加到身体上：

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

我通过将.fixed更改为.fixed .sticky-header来改变您的CSS以保留元素的固定位置：

.fixed .sticky-header { ... }

我已将padding-top添加到body.fixed，这等于固定元素的高度：

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

JSFiddle demo

其他修复

值得注意的是，由于顶部的红色条也是固定的，您还需要考虑它的高度，以防止它与蓝色“容器”分隔线重叠。我已经在this updated JSFiddle demo中为你完成了这个：

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

body.fixed {
    padding-top:82px; /* Red bar height + yellow bar height */
}

我的图片在固定标题上跳了一半

1 个答案:

修复图像“跳转”

其他修复