定位粘性和比例

时间:2018-01-14 12:11:11

标签: css css3

同时使用position: stickytransform: scale()时出现问题。

如果将鼠标悬停在左侧的图标上,您会发现内容会向下跳跃一个像素:

.scroll-spy {
  position: sticky;
  /*position: fixed;*/
  top: 10px;
}

.scroll-spy a {
  color: var(--dark);
}

.scroll-spy a:hover {
  text-decoration: none;
}

.scroll-spy a span {
  position: relative;
}

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--dark);
  visibility: hidden;
  transform: scale(0);
  transition: .25s linear;
}

.scroll-spy a:hover span:after {
  visibility: visible;
  transform: scale(.8);
}

.scroll-spy>div {
  margin-bottom: 20px;
}

.scroll-spy i {
  font-size: 20px;
  color: #e21414;
  transition: color .2s ease-in;
}

.scroll-spy .active i {
  color: #48c417;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="row">
  <aside class="hidden-xs col-sm-2">
    <div class="scroll-spy text-center">
      <div class="scroll-spy-job-type">
        <a href="#job-type" class="active">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Job type</span>
        </a>
      </div>
      <div class="scroll-spy-job-customer">
        <a href="#job-customer">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Customer</span>
        </a>
      </div>
      <div class="scroll-spy-job-details">
        <a href="#job-details">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Information</span>
        </a>
      </div>
    </div>
  </aside>
  <section class="col-xs-12 col-sm-10">
    <div class="add-edit-job-type" id="job-type">
      <h1>Job type</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-customer" id="job-customer">
      <h1>Customer details</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-information" id="job-details">
      <h1>Job information</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
  </section>
</div>

我尝试添加backface-visibility:hiddentransform-style: preserve-3d;perspective: 1000px但没有任何变化。

适用于position: fixed

在Windows 10上的Chrome中发生,尚未测试其他浏览器。

编辑:这是问题的简短视频:

enter image description here

任何人都可以对此有所了解吗?

1 个答案:

答案 0 :(得分:1)

当我将鼠标悬停在链接上时,内容并没有转移,所以我很难解决这个问题。所以我已经将您的比例转换更改为使用宽度转换。如果您仍然看到内容的1px转移,您能否告诉我。

.scroll-spy {
  position: sticky;
  /*position: fixed;*/
  top: 10px;
}

.scroll-spy a {
  color: var(--dark);
}

.scroll-spy a:hover {
  text-decoration: none;
}

.scroll-spy a span {
  position: relative;
}

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -2px;
  left: 50%;
  background-color: var(--dark);
  visibility: hidden;
  transition: .25s linear;
  transform:translateX(-50%);
}

.scroll-spy a:hover span:after {
  visibility: visible;
  width: 80%;
}

.scroll-spy>div {
  margin-bottom: 20px;
}

.scroll-spy i {
  font-size: 20px;
  color: #e21414;
  transition: color .2s ease-in;
}

.scroll-spy .active i {
  color: #48c417;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="row">
  <aside class="hidden-xs col-sm-2">
    <div class="scroll-spy text-center">
      <div class="scroll-spy-job-type">
        <a href="#job-type" class="active">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Job type</span>
        </a>
      </div>
      <div class="scroll-spy-job-customer">
        <a href="#job-customer">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Customer</span>
        </a>
      </div>
      <div class="scroll-spy-job-details">
        <a href="#job-details">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Information</span>
        </a>
      </div>
    </div>
  </aside>
  <section class="col-xs-12 col-sm-10">
    <div class="add-edit-job-type" id="job-type">
      <h1>Job type</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-customer" id="job-customer">
      <h1>Customer details</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-information" id="job-details">
      <h1>Job information</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
  </section>
</div>