位置:sticky不工作

对于其他遇到这种情况的人来说,由于 body 元素具有 overflow-x: hidden;

两个最常见的罪魁祸首为什么 position: sticky; 可能不起作用的是:

1. top: 0; , bottom: 0; left: 0 或者类似的东西
2. hidden , scroll auto .

如果将导航栏移到标题外,效果很好。见下文。因为这个原因,根据 MDN :

根据文档的正常流程定位元素,然后 相对偏移量 包含块 基于顶部、右侧、底部和左侧的值。

包含块

包含块是元素相对定位的祖先

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>

<div class="navbar"></div>

从上面的答案和一些信息展开,使其能够使用 flexbox公司 家长和 溢出不可见 (以下示例假设您将垂直粘性与 顶部或底部 设置为某个值,然后 设置为 粘性的

1. 最常见的情况是,您有一个祖先元素(不仅仅是直接父元素),其溢出属性设置为visible之外的其他属性,因此没有留下空间来保留。 要快速查明是否存在这种情况,可以在浏览器控制台中运行此脚本

    var stickyElement = document.querySelector('.your-sticky-element');
    var parent = stickyElement.parentElement;
    while (parent) {
        var hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow != 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    } 
   

   解决方案:

   a) 如果发现有溢出集,可以将其删除,这应该可以解决它

   b) 如果必须保持溢出设置,则必须使父元素的高度高于粘性元素的高度。如果父元素没有高度,或者粘滞元素填满了所有高度,这意味着当页面滚动时,根本没有地方可以粘住。它不需要显式的高度(垂直),但可以检查粘性元素是否在其后面留有额外的空间。

3. 自我对齐

   在这种情况下, 自对齐:灵活启动 为粘性元素设置可以解决问题,因为元素中的元素将站在开头,在其后面留下额外的空间。

指南: 无论是在flexbox还是在没有flexbox的情况下,情况都要复杂得多,但一般的经验法则是,当滚动时,粘性元素需要父元素中的空间才能保持粘性。

不知何故,您的代码只有在 .navbar I created a codepen snippet for that, check it out

<header>
    <div class="logo">Logo</div>
    <div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
    <ul>
        <li><a href="#">navitem1</a></li>
        <li><a href="#">navitem2</a></li>
        <li><a href="#">navitem3</a></li>
        <li><a href="#">navitem4</a></li>
    </ul>
</div>

马上 position:sticky 正如您在canIuse上看到的那样,它的支持非常好。当然,IE目前没有支持,但新的边缘版本将带来对此的全面支持!我发现了一些关于这个话题的有趣文章:

• https://codepen.io/simevidas/pen/JbdJRZ
• http://caniuse.com/#search=sticky
• MDN上的粘性文章,包括最新的浏览器支持表 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

您的HTML代码原样

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header {
height: 150px;
background-color: #d1d1d1;
}

.navbar {
  background: #999;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

希望这会有所帮助

在之后添加更多内容 导航 提供粘性行为,但仅在一瞬间-如果用户向下滚动过多, 将随一起消失 ,因为它不能从下面跳出来 的下边框。

导航 内部元素,即使用户滚动到页面底部(直接在内部)也部分可见 ).

如果这个解决方案不可行,另一种方法是使用JavaScript。在转换到CSS之前,我使用了以下代码(很久以前在某个地方发现了类似的jQuery解决方案,不记得在哪里,所以这要归功于匿名作者;可以很容易地从中获得Vanilla JS):

$(document).ready(function () {
    var sticky_navigation_offset_top = $('nav').offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('nav').css({
                'position': 'fixed',
                'top': 0,
                'left': 0,
                'right': 0,
                'margin-left': 'auto',
                'margin-right': 'auto'
            });
        } else {
            $('nav').css({
                'position': 'relative'
            });
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });
});

遇到了一些不明显的横向粘滞现象:如果宽度为100%,则粘滞不起作用。宽度应小于容器大小。

我的粘性标题只能部分工作…在几次滚动后,它会消失,但最初会工作

问题似乎是我把父母的身高设置为100%。

我其实并不需要这个,因为尸体已经够了,所以我把它取了下来,一切都很好。永远坚持下去

为了解决这个问题,不需要对HTML结构做出巨大的妥协。只需添加 display: inline;