动态位置

Question

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

有一个标题，根据滚动滑入或滑出。 我有一些粘性持久性标题（使用feedify库）来获取iPhone上“Instagram标题”的效果。

一切都运行良好，但我无法使用粘贴标题来跟随滑动或滑出的其他标题。

现在，它们定位固定，顶部：0px 我需要根据其他标题使它们移动。

任何帮助都非常受欢迎。谢谢！

这是我正在使用的（一点点）修改过的库：

$.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").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（）。不知道之前发生了什么，但现在它正在发挥作用。