Fixed/sticky div 内容贴在顶部后向左移动

Question

我想在下方滚动时将某个 div 固定在顶部。经过一番研究，我找到了这个解决方案。一切正常，除了 div 的内容在滚动时向左移动一点点

javascript

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

CSS

    #sticky {
    padding: 0.5ex;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

HTML

<hr />
<div id="sticky-anchor"></div>
<div id="sticky">
<center>Unternehmen Leistungen Kunden Stärken</center>
<hr /></div>

    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top) {
        $('#sticky').addClass('stick');
      } else {
        $('#sticky').removeClass('stick');
      }
    }

    $(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
    });

#sticky {
  padding: 0.5ex;
  font-size: 2em;
  border-radius: 0.5ex;
}
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  border-radius: 0 0 0.5em 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr />
<div id="sticky-anchor"></div>
<div id="sticky">
  <center>Unternehmen Leistungen Kunden Stärken</center>
  <hr />
</div>

Answer 1

您必须将 div 居中以防止发生这种偏移。要使 div 与 position:fixed; 居中，您需要将 left 和 right 设置为 0。

CSS

#sticky.stick {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  z-index: 10000;
}

function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top) {
        $('#sticky').addClass('stick');
      } else {
        $('#sticky').removeClass('stick');
      }
    }

    $(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
    });

#sticky {
  position:relative;
  padding: 0.5ex;
  font-size: 2em;
  text-align:center;
}
#sticky.stick {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  z-index: 10000;
}

.content {
  height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr />
<div id="sticky-anchor"></div>
<div id="sticky">
  Unternehmen Leistungen Kunden Stärken
  <hr />
</div>
<div class="content"></div>

Fixed/sticky div 内容贴在顶部后向左移动

Fixed/sticky div content shifts to the left after sticking to the top

javascript

html

css

sticky