logo标签列表

CSS粘性定位无法识别1像素。

htmlcss
4
我想制作一个导航栏，使其固定在页面顶部，但是当它固定时会出现一个小缝隙。我没有设置任何边距或填充。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="topdiv"></div>
    <div class="bardiv"></div>
</body>
</html>


html, body {
    height: 200%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.topdiv {
    height: 50px;
}

.bardiv {
    position: sticky;
    top: 0px;
    height: 50px;
    background-color: black;
}

在任何缩放级别下都无法显示，例如在jsfiddle上，我只能在175%时看到它。 这只会发生在 topdiv 的高度以像素为单位声明时，同时将 bardiv 的 top: -1px 也可以解决问题，但我不明白为什么现在它不起作用了。

http://jsfiddle.net/daxy5mru/41/

2
你的工作很好。我没有看到1像素的间隙。 - s.kuznetsov
某些缩放级别和相邻的粘性（甚至有时是绝对）定位元素可能是某些浏览器的副作用。Safari 倾向于是其中之一。 - Sivak
我正在使用 Chrome，只有在 100% 缩放时才显示间隙。我会加入 top: -1px 来确保它可以在任何缩放级别下正常工作。 - Kaung Khant Zaw
2个回答
2
诀窍是使用“top：-1px”。
示例类：
.table-header {
  position: sticky;
  top: -1px;
}
我认为使用负值不是正确的方式，尽量避免使用这种值。 - Ons belkhouja
你知道为什么吗？即使是Bootstrap也使用负边距。这是一个常见问题的简单解决方案。这是我将来要使用的方法。 - Ryan
我喜欢它的原因是，与被接受的答案不同，它不需要JS。 - Ryan
-3

你不能仅仅使用HTML和CSS，还应该使用JavaScript来使头部在滚动时保持粘性。

// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
};
// Get the navbar
var header = document.getElementById("Navbar");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position.
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
/* Style the header */

.navbar {
  padding: 5px;
  background: #555;
}


/* Page content */

.content {
  padding: 16px;
}


/* The sticky class is added to the header with JS when it reaches its scroll position */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


/* Add some top padding to the page content to prevent as the header gets a new position at the top of the page (position:fixed and top:0) */

.sticky+.content {
  padding-top: 102px;
}
<div class="top-container">
  <p>Logo</p>
</div>
<div class="navbar" id="Navbar">
  <h2>your navigation bar</h2>
</div>
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
    voluptatibus.
  </p>
</div>

那会忽略第一个 div，我不想让导航栏总是在顶部。 - soborat
嗨@soborat，根据您的问题，您需要使您的导航栏固定在顶部？您实际上想要做什么？ - Bubashan_kushan
topdiv是标志，下面有一个导航栏，我希望当用户向下滚动时它能够固定在顶部。 - soborat
@soborat，我已按照您的要求更改了代码。思路是在滚动时进行类别更改，这不能仅使用HTML和CSS实现，因此需要使用JavaScript来更改CSS属性。请检查代码，我已添加注释。希望这正是您所期望的。 - Bubashan_kushan
非常感谢，这个解决方案很好用，而且没有像素间隙。但我仍然不知道为什么CSS的position: sticky会在上方出现白线。无论如何，我会使用你的版本作为导航栏，因为它与代码的其他部分更好地集成在一起，谢谢！ - soborat
@soborat，可能是由于某些实现问题或窗口缩放导致的！尝试使用最佳编码实践，并在提问时解释你正在做什么以及你期望得到什么结果，同时如果你的问题得到了解决，请接受答案！祝编码愉快。 - Bubashan_kushan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接