Bootstrap进度条，顶部附有图像

Question

每一个人，或许这个话题以前都被问过，但是我冲浪很多，并没有找到任何直接的答案来解决这个问题。

问题：当用户填写表单时，我需要有一个同时填充的进度条，在进度条的上方，我需要移动图像以及progressBar进度。

因此，填写表单正在填写表单很简单，但我不太方便管理使用progressBar进度移动图像。 这是html示例：

<div class="row">
    <div class="col-xs-3" id="progress_step1">
     <img src="img/step1.png" width="60" height="60" />
    </div>
   </div>
   <div class="trial_banner col-xs-12">
    <div class="col-sm-12 progress" style="padding: 0;">
     <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-   valuemin="0" aria-valuemax="100" style="width:20%">
     <span class="sr-only">20% Complete</span>
    </div>
  </div>

Answer 1

您可以尝试使用javascript，检查用户在表单上的位置（输入或滚动的距离或其他内容）并使用jQuery更改所需信息。

Answer 2

感谢您的评论我想出了一个解决方案，我在这个代码中发布：
enter code here Form & ProgressBar with Image filled simultaneously。

在我的解决方案中，我必须遵守以下要求：

1. 如果表单元素未经过验证，ProgressBar不会前进。
2. 如果已经访问过表单元素，则ProgressBar不会前进，例如，如果输入已经填充并且您想要更改信息。
3. 在填充过程的某些步骤之后，图像必须改变。
4. 完成表格填写程序后，ProgressBar必须改变颜色。
5. 当然，对表单元素的某些验证要求，例如：所需元素或电话号码验证。
PS：这个解决方案是一个更大的项目的一部分，因此我使用bootstrap和不同的js-plugins进行简单的表单验证，例如bootstrap-formhelpers，jquery-validate和jquery的附加方法 - 验证。 当然，任何关于如何使代码更好的评论都会受到欢迎。