2
数学の問題を解決するには問題があります。
私の灰色の.wrap
セクションでは、サークルが表示されるときにラインが伸び始めるようにしています。 今、私はハックな解決策を持っています: ウィンドウが大きくなったり小さくなったりすると、サークルが表示されるときではなく、同じ場所で線が拡大することがわかります。jQuery:スクロールすると線が長くなります
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;
\t -webkit-border-radius: 50%;
\t -moz-border-radius: 50%;
\t border-radius: 50%;
\t width: 11px;
\t height: 11px;
\t border: 1px solid #F04948;
\t position: absolute;
\t top: 0;
\t left: 50%;
\t margin-left: -6px;
}
.ok{
margin:0 auto;
text-align:center;
}
#vertical-divider {
max-height:500px;
margin-top:20px;
\t width: 2px;
height: 50px;
\t position: absolute;
\t left: 50%;
\t top: 12px;
\t 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>