移动固定位置社交分享小工具滚动时位置变化

Question

我在我的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;
}

​

​

Answer 1

我希望这个答案可以帮助你解决你的问题，有很多方法可以解决页脚问题，但我更喜欢这种类，它非常容易理解，因为你将一个div或body设置为100%的视窗高度，然后边距-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>

​