我希望这样当用户向下滚动页面并点击某些“粘性”元素时，他们会将自己添加到页面顶部。
即，假设页面顶部有一个固定的 10px 高的元素，然后是一个 50px 高的 Logo（非粘性），然后是一个水平导航栏（粘性），然后是一些其他非粘性元素，然后是一个寻呼机（粘性，允许用户转到下一页或上一页）等。
这个想法是一些元素在页面上下都有用，其他元素可以留在顶部。但由于它们是嵌入的，我们需要一种方法将重要的部分固定在顶部。
因此，如果您将页面向下滚动到一半，不粘元素会移出视图，但粘性元素将全部堆叠在任何固定元素下方的顶部。在我的示例中，您将拥有 10 像素高的元素、导航栏和寻呼机。徽标会滚动消失。
我想出了一些 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>