位置Sticky无法在Microsoft Edge 41上运行。*

时间:2017-10-27 15:57:09

标签: css-position microsoft-edge sticky floating-action-button

我为浮动动作按钮创建了一个小jsfiddle。 它似乎在iOS,桌面和Android上使用Chrome,Firefox,Safari,Explorer和Edge版本40但只要我更新到Edge版本41(最新版本)就可以正常工作了!

我想知道我是做错了什么,或者在Edge的最后一个版本中发生了什么变化,打破了“position:sticky”?

我已经谷歌这个问题,并在这里检查,但我似乎没有找到答案......

感谢您的时间!

JSFIDDLE

.fab-overlay {
    right: 10px;
    bottom: 10px;
    position: fixed;
}
.fab-overlay .fab-container {
    width: 55px;
    position: sticky;
}
.fab-overlay .fab-container .fab {
    float: right;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -khtml-border-radius: 50%;
    background-color: red;
}
<div class="page-content">
  What is Lorem Ipsum?
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text             
  ever since the 1500s, when an unknown printer took a galley of type       
  and scrambled it to make a type specimen book. It has survived not 
  only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s 
  with the release of Letraset sheets containing Lorem Ipsum passages, 
  and more recently with desktop publishing software like Aldus 
  PageMaker including versions of Lorem Ipsum.
  Why do we use it?
  It is a long established fact that a reader will be distracted by the 
  readable content of a page when looking at its layout. The point of 
  using Lorem Ipsum is that it has a more-or-less normal distribution       
  of letters, as opposed to using 'Content here, content here', making 
  it look like readable English. Many desktop publishing packages and 
  web page editors now use Lorem Ipsum as their default model text, 
  and a search for 'lorem ipsum' will uncover many web sites still in 
  their infancy. Various versions have evolved over the years, 
  sometimes by accident, sometimes on purpose (injected humour and the 
  like).
  
  What is Lorem Ipsum?
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text             
  ever since the 1500s, when an unknown printer took a galley of type       
  and scrambled it to make a type specimen book. It has survived not 
  only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s 
  with the release of Letraset sheets containing Lorem Ipsum passages, 
  and more recently with desktop publishing software like Aldus 
  PageMaker including versions of Lorem Ipsum.
  Why do we use it?
  It is a long established fact that a reader will be distracted by the 
  readable content of a page when looking at its layout. The point of 
  using Lorem Ipsum is that it has a more-or-less normal distribution       
  of letters, as opposed to using 'Content here, content here', making 
  it look like readable English. Many desktop publishing packages and 
  web page editors now use Lorem Ipsum as their default model text, 
  and a search for 'lorem ipsum' will uncover many web sites still in 
  their infancy. Various versions have evolved over the years, 
  sometimes by accident, sometimes on purpose (injected humour and the 
  like).

  What is Lorem Ipsum?
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text             
  ever since the 1500s, when an unknown printer took a galley of type       
  and scrambled it to make a type specimen book. It has survived not 
  only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s 
  with the release of Letraset sheets containing Lorem Ipsum passages, 
  and more recently with desktop publishing software like Aldus 
  PageMaker including versions of Lorem Ipsum.
  Why do we use it?
  It is a long established fact that a reader will be distracted by the 
  readable content of a page when looking at its layout. The point of 
  using Lorem Ipsum is that it has a more-or-less normal distribution       
  of letters, as opposed to using 'Content here, content here', making 
  it look like readable English. Many desktop publishing packages and 
  web page editors now use Lorem Ipsum as their default model text, 
  and a search for 'lorem ipsum' will uncover many web sites still in 
  their infancy. Various versions have evolved over the years, 
  sometimes by accident, sometimes on purpose (injected humour and the 
  like).

  What is Lorem Ipsum?
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text             
  ever since the 1500s, when an unknown printer took a galley of type       
  and scrambled it to make a type specimen book. It has survived not 
  only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s 
  with the release of Letraset sheets containing Lorem Ipsum passages, 
  and more recently with desktop publishing software like Aldus 
  PageMaker including versions of Lorem Ipsum.
  Why do we use it?
  It is a long established fact that a reader will be distracted by the 
  readable content of a page when looking at its layout. The point of 
  using Lorem Ipsum is that it has a more-or-less normal distribution       
  of letters, as opposed to using 'Content here, content here', making 
  it look like readable English. Many desktop publishing packages and 
  web page editors now use Lorem Ipsum as their default model text, 
  and a search for 'lorem ipsum' will uncover many web sites still in 
  their infancy. Various versions have evolved over the years, 
  sometimes by accident, sometimes on purpose (injected humour and the 
  like).

  What is Lorem Ipsum?
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text             
  ever since the 1500s, when an unknown printer took a galley of type       
  and scrambled it to make a type specimen book. It has survived not 
  only five centuries, but also the leap into electronic typesetting, 
  remaining essentially unchanged. It was popularised in the 1960s 
  with the release of Letraset sheets containing Lorem Ipsum passages, 
  and more recently with desktop publishing software like Aldus 
  PageMaker including versions of Lorem Ipsum.
  Why do we use it?
  It is a long established fact that a reader will be distracted by the 
  readable content of a page when looking at its layout. The point of 
  using Lorem Ipsum is that it has a more-or-less normal distribution       
  of letters, as opposed to using 'Content here, content here', making 
  it look like readable English. Many desktop publishing packages and 
  web page editors now use Lorem Ipsum as their default model text, 
  and a search for 'lorem ipsum' will uncover many web sites still in 
  their infancy. Various versions have evolved over the years, 
  sometimes by accident, sometimes on purpose (injected humour and the 
  like).

</div>

<div class="fab-overlay">
	<footer class="footer fab-container">
		<a href="#" class="fab"></a>
	</footer>
</div>

0 个答案:

没有答案