Bootstrap Snippet line create with scroll using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="upDiv"></div>
    <div>
    <div id="resizeMe"> </div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
#resizeMe{
            background-color: red; 
            width: 10px;
            /*min-height: 100px;*/
            margin-left: calc(50% - 5px);
            height: 0;
        }
        .upDiv{width: 100%; height: 500px; background-color: orange;}
        
        body{height: 1500px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
    var mainDiv = $('#resizeMe');
    var windowHeight = $(window).height();
    var topPos = $(window).scrollTop();
    $(mainDiv).css('height', topPos  + 'px');   
    var valueCookie=topPos;
        
        $(window).scroll(function(){
            var topPos = $(this).scrollTop();
                        
            if (topPos > valueCookie){
                console.log(valueCookie);
                valueCookie=topPos;
                $(mainDiv).css('height', topPos  + 'px');   
                console.log(topPos);
            }
            
         });
     
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"line create with scroll"
Bootstrap 4.1.1 Snippet by mdburhani52

Related: See More

Questions / Comments:

"line create with scroll" Bootstrap 4.1.1 Snippet by mdburhani52

Related: See More

Questions / Comments:

"line create with scroll"
Bootstrap 4.1.1 Snippet by mdburhani52