Bootstrap：在滚动上移动 div 的更优雅的方式答案

【问题标题】：Bootstrap : More Elegant way to move a div on scrollBootstrap：在滚动上移动 div 的更优雅的方式
【发布时间】：2015-02-19 15:14:17
【问题描述】：

当我向下滚动浏览器时，我试图让 div 保持在右上角。在桌面上查看时看起来不错。但是当在平板电脑等上查看时，它是一团糟。有没有更优雅的方式来定位 div，以便用户在所有屏幕中向下滚动时看到。我正在使用引导程序。这里是DEMO 这是 HTML 引导代码：

<!DOCTYPE html>
<html lang="en" ng-app="ShopCartApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
   <style type="text/css">
    body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
#divTotal{
  background-color: green;

}
   </style>


  </head>

  <body>



    <div class="container">

      <div class="row">
        <div class="col-md-8">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    <div class="radio">
                        <label><input type="radio" name="optradio">Option 1</label>
                    </div>
                     <div class="radio">
                        <label><input type="radio" name="optradio">Option 1</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="optradio">Option 1</label>
                    </div>
                </div>
            </div>

            <div class="panel panel-primary">
              <div class="panel-heading">
                  <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                    <div class="radio">
                        <label><input type="radio" name="optradio1">Option 1</label>
                    </div>
                     <div class="radio">
                        <label><input type="radio" name="optradio1">Option 1</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="optradio1">Option 1</label>
                    </div>  
              </div>
            </div>

            <div class="panel panel-primary">
              <div class="panel-heading">
                  <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                    <div class="radio">
                        <label><input type="radio" name="optradio2">Option 1</label>
                    </div>
                     <div class="radio">
                        <label><input type="radio" name="optradio2">Option 1</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="optradio2">Option 1</label>
                    </div>
              </div>
            </div>

            <div class="panel panel-primary">
              <div class="panel-heading">
                  <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                    <div class="radio">
                        <label><input type="radio" name="optradio3">Option 1</label>
                    </div>
                     <div class="radio">
                        <label><input type="radio" name="optradio3">Option 1</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="optradio3">Option 1</label>
                    </div>
              </div>
            </div>
        </div>

        <div style="position:fixed;top:20px;float:right;right:0px;" class="col-md-4">
            <div class="panel panel-primary">
              <div id="divTotal" class="panel-heading">
                  <h3 class="panel-title">Total</h3>
              </div>
              <div class="panel-body">
                  <h2>Total</h2>
              </div>
          </div>
        </div>
      </div><!-- /.row  -->


    </div><!-- /.container -->


   <script type="text/javascript" src="angular.js"></script>
  </body>
</html>

【问题讨论】：

您可以为小型设备添加类class="col-md-8 col-sm-8 col-xs-8"和class="col-md-4 col-sm-4 sol-xs-4"
会很有帮助，如果你能提供一个演示
这里是fiddle

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

<div class="container">

  <div class="row">
    <div style="position:fixed;top:20px;float:left;left:0px;"class="col-sm-8">

【讨论】：

【解决方案2】：

据我所知，没有 CSS 解决方案可以为旧版移动浏览器实现 position: fixed 容器。您可以编写一个 javascript 来调整每个滚动事件上容器的位置，但这在 iOS 上不会很好地工作，因为 iOS 仅在滚动完成后触发 onscroll 事件，而不是在滚动时触发。这意味着容器在滚动后会跳转到它的固定位置，而不是停留在那里。

但是，有一些高级 JS 库可以使用假滚动容器来模拟滚动行为，从而绕过所描述的问题，例如： http://cubiq.org/iscroll-5

【讨论】：