jQuery：スクロールすると線が長くなります

数学の問題を解決するには問題があります。
私の灰色の.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>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p><p>&nbsp;</p> 
 
    
 
</div>

出典

2016-11-10 Snorlax

私はあなたの問題を解決だと思うjsfiddleを実装@Snorlax。あなたの考えを聞かせてください。実装のためにサードパーティ製の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>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p><p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p><p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p><p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p class="last">&nbsp;</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/

おかげチャンドラ

出典

2016-11-10 22:45:45 agent47

jQuery：スクロールすると線が長くなります

答えて

関連する問題