我无法正确计算数学
在我的灰色.wrap部分，我想在圆圈开始观察时让线条开始增长
现在，我有一个hacky解决方案：
如果窗口变得越来越大（垂直），您将看到线条将在相同的位置增长，而不是在圆圈开始查看时。
http://jsfiddle.net/u5c51ubk/58/
$(document).on('scroll', function(e) {
var hT = $('#vertical-divider').offset().top,
hH = $('#vertical-divider').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop(),
topofBox
console.log((hT-wH) , wS);
$('#vertical-divider').css('height', '' + (document.body.scrollTop - 300) + 'px');
}); .section{
height:100vh;
}
#first{
background:red;
}
.wrap {
width:100%;
position: relative;
background:gray;
}
#circle {
margin-top:20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 11px;
height: 11px;
border: 1px solid #F04948;
position: absolute;
top: 0;
left: 50%;
margin-left: -6px;
}
.ok{
margin:0 auto;
text-align:center;
}
#vertical-divider {
max-height:500px;
margin-top:20px;
width: 2px;
height: 50px;
position: absolute;
left: 50%;
top: 12px;
border-left: 3px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="first">
</div>
<div class="wrap section">
<span id="circle"></span>
<div class="ok">Hi, my name is Jason</div>
<span id="vertical-divider"></span>
<div class="osk">Hi, my name is Jason</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
</div>
答案 0 :(得分：1)
@Snorlax我实施了一个jsfiddle，我认为它解决了你的问题。让我知道你的想法。我使用任何第三方js lib来实现。
<!DOCTYPE html>
<html>
<head>
<title>trial</title>
<style type="text/css">
#first{
background: pink;
height: 800px;
}
.wrap {
width:100%;
position: relative;
background:gray;
overflow-y: hidden;
}
#circle {
margin-top:20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 11px;
height: 11px;
border: 1px solid #F04948;
position: absolute;
top: 0;
left: 50%;
margin-left: -4px;
}
.ok{
margin:0 auto;
text-align:center;
}
#vertical-divider {
margin-top:20px;
width: 2px;
position: absolute;
left: 50%;
top: 12px;
border-left: 3px solid black;
}
</style>
</head>
<body>
<div class="section" id="first">
</div>
<div class="wrap">
<span id="circle"></span>
<div class="ok">Hi, my name is Jason</div>
<span id="vertical-divider"></span>
<div class="osk">Hi, my name is Jason</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="last"> </p>
</div>
</body>
<script type="text/javascript">
//function that decides whether to paint the divider
//also decides how much length should the divider element be
var showDivider = function(element) {
var isVisible = false;
var windowHeight = window.innerHeight;
var dimensions = element.getBoundingClientRect();
var top = dimensions.top;
var difference;
if (top === 0) {
isVisible = true;
difference = windowHeight;
} else if (top < 0) {
isVisible = true;
difference = -top + windowHeight;
} else if (top < windowHeight) {
isVisible = true;
difference = windowHeight - top;
}
if (isVisible) {
paintDivider(element, difference);
}
};
//function to paint the divider
var paintDivider = function(divider, length) {
if (divider) {
divider.style.height = length + "px";
}
};
//get the divider element that needs to be painted
var divider = document.getElementById("vertical-divider");
//bind to the 'scorll' event and 'resize' event, to decide whether to
//paint the divider or not
document.addEventListener("scroll", function() {
showDivider(divider);
});
document.addEventListener("resize", function() {
showDivider(divider);
});
</script>
</html>
https://jsfiddle.net/fkmkLfyt/3/
由于 钱德拉