我正在尝试为博客文章制作垂直社交分享按钮。
我希望滚动到后固定“share_DIV”位置
某一点。
- 因为“Share_DIV”不应该出现在标题区域，它的
位置将是绝对的并通过以下方式计算jQuery让它在下面
*the header* and *the title*，那么当您向下滚动并到达文本正文“share_DIV”时应该start与您同行，同时向下滚动到文本正文的末尾。
So the 分享_DIV应在滚动事件上垂直移动，仅在 START POINT -> END POINT 之间
share_DIV 有类.vertical-container在小提琴代码中。
小提琴示例 http://jsfiddle.net/markor91/h5t7pgfb/25/将准确解释我需要什么。
我怎样才能用 jQuery 完成它？
也许这就是您想要的：Fiddle http://jsfiddle.net/Kyojimaru/h5t7pgfb/75/
基本上，你需要抓住scroll event通过使用
$(window).on("scroll", function() { ... });
然后检查当前是否scroll position大于position of .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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
