CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4765

jQuery: make line longer as you scroll

I'm having trouble getting the math right.
On my gray .wrap section, I am trying to have the line start growing when the circle comes to view.
Right now, I have a hacky solution: If the window gets larger and smaller(vertically), you'll see that the line will grow at the same spot regardless, and not when the circle comes to view.

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>&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>

Upvotes: 2

Views: 385

Answers (1)

agent47
agent47

Reputation: 201

@Snorlax I implemented a jsfiddle which I think solves your issue. Let me know your thoughts. I dint use any third party js lib for the implementation.

<!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/

Thanks Chandra

Upvotes: 1

Related Questions