javascript - jQuery: make line longer as you scroll -
i'm having trouble getting math right.
on gray .wrap section, trying have line start growing when circle comes view.
right now, have hacky solution: if window gets larger , smaller(vertically), you'll see line grow @ same spot regardless, , not when circle comes 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, name jason</div> <span id="vertical-divider"></span> <div class="osk">hi, name 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>
@snorlax implemented jsfiddle think solves issue. let me know thoughts. dint use third party js lib 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, name jason</div> <span id="vertical-divider"></span> <div class="osk">hi, name 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 decides whether paint divider //also decides how length should divider element 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 paint divider var paintdivider = function(divider, length) { if (divider) { divider.style.height = length + "px"; } }; //get divider element needs painted var divider = document.getelementbyid("vertical-divider"); //bind 'scorll' event , 'resize' event, decide whether //paint divider or not document.addeventlistener("scroll", function() { showdivider(divider); }); document.addeventlistener("resize", function() { showdivider(divider); }); </script> </html> https://jsfiddle.net/fkmklfyt/3/
thanks chandra
Comments
Post a Comment