2
사용자가 페이지를 아래로 스크롤하고 특정 "끈적 끈적한"요소를 눌렀을 때 페이지 위쪽에 추가되도록합니다. .jQuery (또는 다른 javascript) 뷰포트 상단에서 고정 거리에 div를 스택하는 방법
예를 들어, 페이지 상단에 고정 10px 높이 요소가 있고 그 다음 50px 높이 로고 (끈적 거리 않음), 수평 탐색 모음 (끈적), 기타 끈적 거리지 않은 요소가있는 경우 페이저 (스티커, 사용자가 다음 또는 이전 페이지로 이동할 수 있음) 등.
아이디어는 일부 요소가 페이지 위아래로 유용하며 다른 요소는 맨 위에 머무를 수 있다는 것입니다. 그러나 그들이 삽입되기 때문에, 우리는 중요한 것들을 꼭대기에 올리는 방법이 필요합니다.
페이지의 중간까지 스크롤하면 비 스틱 요소가 보이지 않게 이동하지만 끈적한 요소는 고정 요소 아래의 맨 위에 스택됩니다. 내 예에서는 10px 높이 요소, 탐색 표시 줄 및 호출기가 있습니다. 로고가 사라질 것입니다.
몇 가지 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>