时间戳

首页 > 解决方案 > 滚动时移动固定位置社交分享小部件位置变化

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

问题描述

我为我的 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

解决方案

我希望这个答案能帮助你解决你的问题，有很多方法可以肯定地解决页脚问题，但我更喜欢这种非常容易理解的类，因为你将 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>

推荐阅读