滚动时移动固定位置社交分享小部件位置变化答案

【问题标题】：Mobile fixed position social share widget position change when scrolling滚动时移动固定位置社交分享小部件位置变化
【发布时间】：2020-05-12 01:25:16
【问题描述】：

我为我的 WordPress 网站使用基于 CSS 和 HTML 的社交分享插件。它本身不支持固定位置。然后我使用以下附加 CSS 使其仅在移动设备上具有粘性。我认为max-width: 767px 适用于移动设备（如果我错了请更正）。

它可以在我测试过的设备上运行，但是当我滚动页面时，这个小部件的位置会发生轻微变化，然后它又会回到固定位置。

如何解决这种位置变化？为了更好的理解，我在文末加了gif。

@media only screen and (max-width: 767px) {
  .socialsharing {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-7.5%);
  -ms-transform: translateY(-7.5%);
  transform: translateY(-7.5%);
  display: flex;
  width: auto-flow;
  bottom: 0;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
}

【问题讨论】：

尝试删除位置：固定；或使用位置：绝对

标签： css

【解决方案1】：

我希望这个答案能帮助你解决你的问题，有很多方法可以解决页脚问题，但我更喜欢这种非常容易理解的类，因为你将 div 或 body 设置为 100%视口高度，然后是margin-top：auto和bottom：0；将始终修复页脚中的堆栈问题。祝你好运

.h-100{
  height : 100vh;
}

.button {
 background-color: orange;
}

/* I added class here to show how its working in Code Snippet, you don't need to do this part of css*/
  .socialsharing {
    position:fixed;
    bottom:0px;
    width: 100%;
    margin-top: auto !important;
    display: block !important
    padding: 10px;
    padding-bottom: 0px;
    text-align: center;
    z-index: 999;
  }

/*end of extra Css*/

@media only screen and (max-width: 767px) {
  .socialsharing {
    position:fixed;
    bottom:0px;
    width: 100%;
    margin-top: auto !important;
    display: block !important
    padding: 10px;
    padding-bottom: 0px;
    text-align: center;
    z-index: 999;
  }
}

<div class="h-100">
  <div class="bodyContent">
    <h3> Social Media in Footer </h3>
  </div>
  <div class="socialsharing">
      <input type="button" value="StackOverflow" class="button"/>
  </div>
<div>

【讨论】：