javascript - jQuery(或其他javascript)以距视口(viewport)顶部固定距离堆叠div

Question

我希望这样当用户向下滚动页面并点击某些“粘性”元素时，他们会将自己添加到页面顶部。

也就是说，假设页面顶部有一个固定的 10px 高元素，然后是 50px 高的 Logo (非粘性)，然后是水平导航栏(粘性)，然后是其他一些非粘性元素，然后是分页器(粘性，允许用户转到下一页或上一页)等。

想法是一些元素在整个页面上下都是有用的，其他元素可以只留在顶部。但由于它们是嵌入的，我们需要一种方法将重要的贴在顶部。

因此，如果您向下滚动页面一半，非粘性元素将移出 View ，但粘性元素将全部堆叠在任何固定元素下方的顶部。在我的示例中，您将拥有 10 像素高的元素、导航栏和分页器。 Logo 会滚动离开。

我想出了一些 jQuery，但它很古怪。如果我慢慢向下滚动，它会起作用。如果我快速向下滚动，或点击键盘上的“向下翻页”，它最终会无法正常工作，在粘性元素和其他错误之间出现额外的空间。

感觉我很近，但又很远。

这是我的。

<style type="text/css">
div.stickert {
    /*
    padding:20px;
    margin:20px 0;*/
    /*background:#AAA;
    width:190px;*/
    position:relative;
    top:0px;
}
.sticked {
    position:fixed;
    /*top:0px;
    z-index:100;*/
    width:100%;
}
</style>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script type="text/javascript">
jQuery(document).ready(function() {
    var stupid = jQuery(".stickert");
    var startOffset = 0;
    var startingZ = 100;


/*  var topDone = []; */
/*  var pos = second.position();  */
    var origOffsets = [];
    var heights = [];
    var currentOffsets = [];
    mWait = jQuery("#m-wait");
    mWait.show();
    mGraph = mWait.find('p');
    mGraph.text('');

    jQuery.each(stupid, function(i, object) {
            var obj = jQuery(object);
            var pos = obj.position();
            origOffsets[ i ] = pos.top;
            heights[ i ] = obj.height();    
        } 
    );
    var debug = false;
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        var topOffset = startOffset;
        var theZIndex = startingZ;
        jQuery.each(stupid, function(i, object) { 
            var obj = jQuery(object);
            console.log(obj);
            /*mGraph.append('obj:<br />' + obj);*/
            /*var pos = obj.position();*/
/*          currentOffsets[ i ] = pos;*/
            var tagName = obj.get(0).tagName;
            tagName.toLowerCase; /* e.g. "div" or "li" */
            var totalOffset = parseInt(origOffsets[ i ],10) - parseInt(startOffset,10) - topOffset; /* I think subtraction is correct */
            if(windowpos <= totalOffset /*&& obj.hasClass("sticked") */) {
                if( debug ) alert('resetting');
                if(obj.hasClass("sticked") ) {

                    obj.removeClass("sticked");
                    /*obj.addClass("stickert");*/               
                    obj.css({ top: "0px"  });
                    var removeThis = obj.next(".sticked-padder");
                    removeThis.remove();
                    obj.addClass("stickert"); /* put inside if hasclass? */

                }


                /* return false; */
            } else if(windowpos > totalOffset) {
            /*if(windowpos >= pos.top) {*/
                /*if( debug ) alert("setting sticked");*/

                /*if(!(i in topDone)) {*/
                if(obj.hasClass("stickert")) {
                    mGraph.append('Element ' + i + '<br />Made it to the start. zIndex = ' + theZIndex + '</br>'
                        + 'topOffset= ' + topOffset + '<br />');
                    obj.removeClass("stickert");                    
                    /*currentOffsets[ i ] = obj.position();*/
                    topOffset += obj.height();
                    if( debug ) alert(topOffset);
                    obj.after('<' + tagName + ' class="sticked-padder" style="height:' + obj.height() + 'px"></div>');                  
                    /*topDone[ i ] = "done";*/

                    obj.css({ top: ( topOffset - heights[ i ] ) + "px"});
                    obj.addClass("sticked");
                    obj.css({ zIndex: theZIndex });
                    theZIndex -=1 ;
                    mGraph.append('Element ' + i + '<br />Made it to the end. zIndex = ' + theZIndex + '</br>'
                    + 'topOffset= ' + topOffset + '<br />');
                    /* alert(theZIndex);*/
                }



            }
            topOffset += heights[ i ];          
        });
        jQuery(window).scrollTop(windowpos); /* make sure window stays in same place */
        /* ssss.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); */
        /*if (windowpos >= pos.top) {
            stupid.addClass("sticked");
        } else {
            stupid.removeClass("sticked");  
        }*/
    });
});
</script>

Answer 1

你可以查看 Twitter Bootstrap 的 affix javascript 并重新使用它 http://getbootstrap.com/javascript/#affix

来源: https://github.com/twbs/bootstrap/blob/3.0.0-wip/js/affix.js