특정 지점으로 스크롤 한 후 "share_DIV"위치를 고정하고 싶습니다.
*the header*하고 *the title*당신이해야 아래로 스크롤 텍스트 본문 "share_DIV을"에 도달하면 다음 시작 스크롤하는 동안 당신과 함께 걷기 텍스트 본문의 끝까지 내려갑니다.따라서 share_DIV 는 스크롤 이벤트에서 START POINT- > END POINT 사이에서만 수직으로 이동해야합니다.
share_DIV에는 .vertical-container바이올린 코드에 클래스 가 있습니다.
Fiddle Example 은 내가 필요한 것을 정확히 설명합니다.
jQuery로 어떻게 할 수 있습니까?
아마도 이것이 당신이 원하는 것입니다 : Fiddle
기본적으로 다음 scroll event을 사용하여 잡을 필요가 있습니다.
$(window).on("scroll", function() { ... });
이어서 전류가 있는지 확인 scroll position댄 큰지 position의 .content댄 및 크지 .content그것의 위치로 추가height
이를 수행하는 방법에 대한 전체 코드는 다음과 같습니다.
$(function() {
var top = $(".content").offset().top;
var btm = top + $(".content").outerHeight(true);
var $shareContainer = $(".vertical-container");
var shareHeight = $shareContainer.outerHeight();
$shareContainer.css('top', top + "px");
$(window).on("scroll", function() {
//console.log($(this).scrollTop());
var scrollPosition = $(this).scrollTop();
if (scrollPosition > top && scrollPosition + shareHeight < btm) {
$shareContainer.css('top', scrollPosition + "px");
} else if (scrollPosition < top) {
$shareContainer.css('top', top + "px");
} else {
$shareContainer.css('top', btm - shareHeight + "px");
}
});
});html {
margin: 0 49px;
}
.header {
height: 200px;
background: url(http://www.custom-web-design.ca/custom-web-design.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.panel {
border-radius: 4px;
border: 1px solid gray;
height: 1000px;
width: 100%;
}
p {
margin: 0;
font-weight: bold;
border-bottom: 1px solid red;
}
.title {
background-color: cyan;
height: 60px;
text-align: center;
padding-top: 15px;
}
.content {
padding: 15px 60px 15px 15px;
}
.vertical-container {
color: white;
font-size: 14px;
position: absolute;
right: 45px;
top: 15px;
min-height: 200px;
background-color: #3B5998;
width: 60px;
}
.vertical-container:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
top: 100%;
border-style: solid;
border-width: 5px 5px;
right: 0px;
border-color: #23355B transparent transparent #23355B;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="header">
</div>
<div class="panel">
<div class="title">SOME TITLE</div>
<div class="content">
<p>START POINT</p>
Performed suspicion in certainty so frankness by attention pretended. Newspaper or in tolerably education enjoyment. Extremity excellent certainty discourse sincerity no he so resembled. Joy house worse arise total boy but. Elderly up chicken do at feeling
is. Like seen drew no make fond at on rent. Behaviour extremely her explained situation yet september gentleman are who. Is thought or pointed hearing he. Rendered her for put improved concerns his. Ladies bed wisdom theirs mrs men months set. Everything
so dispatched as it increasing pianoforte. Hearing now saw perhaps minutes herself his. Of instantly excellent therefore difficult he northward. Joy green but least marry rapid quiet but. Way devonshire introduced expression saw travelling affronting.
Her and effects affixed pretend account ten natural. Need eat week even yet that. Incommode delighted he resolving sportsmen do in listening.
<p>END POINT</p>
</div>
<div class="vertical-container">SHARE container</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다