javascript - 动态位置后的粘性标题

Question

我有一个网站:http://mtlgigs.com

有一个标题，根据滚动滑入或滑出。 我有一些粘性持久 header (使用 feedify 库)在 iPhone 上获得“Instagram header ”的效果。

一切正常，但我无法让粘性 header 跟随另一个滑出或滑出的 header 。

现在，它们的位置是固定的，top:0px 我需要让它们根据其他 header 移动。

我们非常欢迎任何帮助。谢谢!

这是我正在使用的(一点点)修改后的库:

$.fn.feedify = function(options) {

    var marginBot = parseInt($(".header-month").css("margin-bottom"), 10);
    var marginTop = parseInt($(".header-month").css("margin-top"), 10);
    var marginBody = parseInt($(".feedify-item-body").css("margin-top"), 10);

    var feedify = this;
    var settings = $.extend({
        container: $(window),
        offset: 0
    }, options);

    settings.container.bind('scroll touchmove load', function(e) {

        feedify.children('.feedify-item').each(function() {
            var itemHeader       = $(this).find('.feedify-item-header');
            var itemBody         = $(this).find('.feedify-item-body');
            var itemHeaderHeight = itemHeader.outerHeight();
            var viewportOffset   = $(this).offset().top - settings.container.scrollTop() + settings.offset;
            var switchPoint      = '-' + ($(this).height() - itemHeaderHeight - settings.offset);

            if (viewportOffset < 0) {
                if (viewportOffset > switchPoint ? true : false) {
                    $(this).addClass('fixed').removeClass('bottom');
                }
                else {
                    $(this).removeClass('fixed').addClass('bottom');
                }
                itemBody.css('paddingTop', itemHeaderHeight + marginBot + marginTop);
                itemHeader.css('width', feedify.width());
                return;
            }
            $(this).removeClass('fixed').removeClass('bottom');
            itemBody.css('paddingTop', '0');
            itemHeader.css('width', 'auto');
        });

    });

};

这是处理其他 header 的代码:

$("#header").headroom({
    "offset": offsetHeadroom,
    "tolerance": 5,
    "classes": {
        "pinned": "slideDown",
        "unpinned": "slideUp"
    },
});

$(".menu").headroom({
    "offset": offsetHeadroom,
    "tolerance": 5,
    "classes":
    {
        "pinned": "fadeInUp",
        "unpinned": "fadeOutDown"
    },
    onUnpin : function() // Header go down
    {
        $("#menu-open").prop("checked",false);
        $("#menu-open").attr("disabled", true);
        console.log("Descends"+$(".header--fixed ").position().top);
        //$(".feedify-item.fixed .header-month").removeClass("slideDown");
        //$(".feedify-item.fixed .header-month").addClass("slideUpBig");
        //$(".feedify-item.fixed .header-month").attr("style","margin-top:0px");
    },
    onPin : function() // Header go up
    {
        $("#menu-open").attr("disabled", false);
        console.log("Monte"+$(".header--fixed ").position().top);

        //$(".feedify-item.fixed .header-month").attr("style","margin-top:55px");
        //$(".feedify-item.fixed .header-month").removeClass("slideUpBig");
        //$(".feedify-item.fixed .header-month").addClass("slideDown");
    }
});

如你所见，我一直在尝试调整职业、位置等......

谢谢

Answer 1

对于好奇的人，我给自己找到了答案。

我使用了 translateY() 或 translate3d()。不知道之前发生了什么，但现在可以了。