Question

我有一些社交按钮，我想在我的网站上静态修复。即使用户向下滚动，社交按钮也应该垂直居中放置在右侧，如下所示：

这是我目前的代码设置：

＆＃13;

// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}

＆＃13;

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body { margin-top:20px; }
.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <div class="row">
          <div class="col-md-3">
              <div class="list-group">
                  <a href="#" class="list-group-item visitor">
                      <h3 class="pull-right">
                          <i class="fa fa-eye"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Website Views</p>
                  </a><a href="#" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-facebook-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Facebook Likes</p>
                  </a><a href="#" class="list-group-item twitter">
                      <h3 class="pull-right">
                          <i class="fa fa-twitter-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Twitter Followers</p>
                 </a><a href="#" class="list-group-item youtube">
                      <h3 class="pull-right">
                          <i class="fa fa-youtube-play"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Youtube Subscribers</p>
                  </a>
              </div>
          </div>
      </div>
  </div>

＆＃13;

当我尝试定位时发生了什么

position: fixed; right: 0; top: 100px;

在<div class="container">之上

，图标移动到了位置，但包含视图的矩形停留在同一个地方

当我试图移动

时

position: fixed; right: 0; top: 100px;

在<div class="list-group">以下它已被修复，但看起来完全被挤压了

Answer 1

这里只是您想要的更新代码

$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body { margin-top:20px; }
.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }

<div class="container" style="height:900px;">
</div>
<div class="container" style="position: fixed; right: 0; top: 100px;width:250px!important;">
      <div class="row">
          <div class="col-md-3">
              <div class="list-group">
                  <a href="#" class="list-group-item visitor">
                      <h3 class="pull-right">
                          <i class="fa fa-eye"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Website Views</p>
                  </a><a href="#" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-facebook-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Facebook Likes</p>
                  </a><a href="#" class="list-group-item twitter">
                      <h3 class="pull-right">
                          <i class="fa fa-twitter-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Twitter Followers</p>
                 </a><a href="#" class="list-group-item youtube">
                      <h3 class="pull-right">
                          <i class="fa fa-youtube-play"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Youtube Subscribers</p>
                  </a>
              </div>
          </div>
      </div>
  </div>

这是演示工作代码示例

<强> Check Demo

如果您希望自己的图标不被挤压，那么您需要相应地管理图标的高度和宽度，以便它看起来不错

这里是徽标

的更新小提琴

<强> Check Updated Demo

使用固定元素向下滚动

1 个答案: