Vertical Progress Scrollbar
I am trying to make the following example of a progress scrollbar vertical:
http://flowplayer.org/tools/demos/rangeinput/scrollbar.html
I have tried for 开发者_运维问答ages now and cant seem to find a way. I'm new to jquery so any help would be much appreciated.
Updated version from comments:
http://jsfiddle.net/SKfGQ/5/
It works, but it's massively fudged.
It's as simple as inverting all the width and height related properties.
So, in the JavaScript, change left to top.
In the CSS, where there is a horizontal property and a vertical property, switch them.
I took the code from here: http://flowplayer.org/tools/demos/rangeinput/scrollbar.htm
And this was the result: http://jsfiddle.net/HGUzW/
The only new CSS is at the top:
#scrollwrap, .slider {
float: left
}
.slider {
margin-left: 50px
}
Did you try this plugin for jquery? jquery-progressbarvertical It seems that this is the thing that you want. Or you can have a look at the jquery plugin site itself for the available plugins.
var heightProgress = $('.progress_bar_bg').height();
var positionofStart = $('.progress_section').position().top
$(window).on('scroll',function(){
if($(window).scrollTop() >= $('.progress_section').position().top - $(window).height()) {
var scrolled = $(document).scrollTop() + $(window).height() ;
var tabminus = (scrolled - positionofStart) ;
var value = (tabminus / heightProgress) * 100;
$('.progress').css('height', ''+value+'%')
}
}).dummy{
height: 1200px;
}
.progress_bar_bg{
width: 2px;
height: 2000px;
background-color: grey;
text-align: center;
margin: 0 auto;
position: relative;
}
.progress{
width: 100%;
position: absolute;
height: 20px;
background-color: red;
max-height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dummy">
</div>
<div class="progress_section">
<div class="progress_bar_bg">
<div class="progress"></div>
</div>
</div>
<div class="dummy">
</div>
</body>
加载中,请稍侯......
精彩评论