从浏览器窗口偏移粘性标题

时间:2016-06-07 19:56:22

标签: javascript jquery html css

我正在使用一个名为Feedify的插件,它会创建粘性部分标题(如iOS,Instagram等),然后被下一个标题所覆盖。像这样:

https://jsfiddle.net/6royb1ec/3/

但是,我无法偏移标头,以便以下标头保留与第一个标头相同的偏移量。

这是HTML

<div class="container feedify">
        <div class="feedify-item">
            <h3 class="feedify-item-header"><span>Header</span></h3>
            <div class="feedify-item-body">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
            </div>
        </div>
        <div class="feedify-item">
            <h3 class="feedify-item-header"><span>Header 2</span></h3>
            <div class="feedify-item-body">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
            </div>
        </div>
        <div class="feedify-item">
            <h3 class="feedify-item-header"><span>Header 3</span></h3>
            <div class="feedify-item-body">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
                <img src="http://placekitten.com/1600/900">
            </div>
        </div>
    </div>

JS:

/* Feedify v1.0.1 by Sarah Dayan | http://demos.sarahdayan.com/feedify */ ! function(e) {
e.fn.feedify = function() {
    var i = this;
    e(window).bind("scroll touchmove", function(d) {
        i.children(".feedify-item").each(function() {
            var d = e(this),
                t = i.width(),
                s = e(this).height(),
                h = e(this).children(".feedify-item-header").outerHeight(),
                f = d.offset(),
                o = f.top - e(window).scrollTop(),
                c = "-" + (s - h);
            o > c && 0 > o ? (e(this).addClass("fixed").removeClass("bottom").children(".feedify-item-header").css("width", t), e(this).children(".feedify-item-body").css("paddingTop", h), e(this).children(".feedify-item-header").css("width", t)) : c >= o ? (e(this).removeClass("fixed").addClass("bottom"), e(this).children(".feedify-item-body").css("paddingTop", h), e(this).children(".feedify-item-header").css("width", t)) : (e(this).removeClass("fixed").removeClass("bottom").children(".feedify-item-header").css("width", "auto"), e(this).children(".feedify-item-body").css("paddingTop", "0"), e(this).children(".feedify-item-header").css("width", "auto"))
        })
    })
}
}(jQuery);


$(function() {
      $('.feedify').feedify();
    });

CSS:

.container {
            width: 50%;
            float: right;
            top: 5vw;
            position: relative;
            }

            .container img {
                width: 100%;
                height: auto;
                margin: 0 0 20px 0;
                }

        h3.feedify-item-header {
            padding: 0px;
            background: lightyellow;
            margin: 0;
            width: 15vw !important;
            margin-left: -16vw;
    float: left;
        }   


        .feedify .feedify-item {
          position: relative;
        }
        .feedify .feedify-item .feedify-item-header {
          z-index: 100;
        }
        .feedify .feedify-item.fixed .feedify-item-header {
          position: fixed;
          top: 0;
        }
        .feedify .feedify-item.bottom .feedify-item-header {
          position: absolute;
          bottom: 0;
        }   

如何让插件运行,以便它对窗口顶部而不是窗口顶部的偏移量做出反应?

感谢任何帮助,谢谢。

0 个答案:

没有答案