blocks|key|724231|text|在Chrome加入position:+sticky之后，它被发现是还没准备好和降级到-启用-试验性-webkit-特性标志。保罗爱尔兰二月份“功能是在一个奇怪的模糊状态自动柜员机”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|724232|我一直在使用聚酰亚胺，直到它变得过于头痛。它可以很好地工作，但也有一些角落情况，比如CORS问题，它通过对所有CSS链接执行XHR请求并为浏览器忽略的“位置:粘滞”声明来减缓页面加载。|724233|现在我使用的是ScrollToFixed，它比StickyJS更好，因为它不会使我的布局与包装混淆。|724234|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/chromium/issues/detail?id=152681|1|https://stackoverflow.com/questions/15646747/css-position-sticky|2|https://twitter.com/paul_irish/status/243119987361980416|3|https://github.com/matthewp/position--sticky-|4|https://github.com/bigspotteddog/ScrollToFixed|5|http://stickyjs.com/^0|9|G|X|5|0|13|M|1|1V|3|2|0|6|4|3|0|7|D|4|N|8|5|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]|$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|H|3|I|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]|$9|1L|A|1M|1|1N]]|E|$]]|$1|J|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]|V|$5|M|N|O|E|$P|W]]|X|$5|M|N|O|E|$P|Y]]|Z|$5|M|N|O|E|$P|10]]]]

<p>After Chrome added <code>position: sticky</code>, it was found to be <a href="http://code.google.com/p/chromium/issues/detail?id=152681" rel="nofollow noreferrer">not ready enough</a> and <a href="https://stackoverflow.com/questions/15646747/css-position-sticky">relegated to to --enable-experimental-webkit-features flag</a>. Paul Irish <a href="https://twitter.com/paul_irish/status/243119987361980416" rel="nofollow noreferrer">said in February</a> "feature is in a weird limbo state atm".</p>

<p>I was using <a href="https://github.com/matthewp/position--sticky-" rel="nofollow noreferrer">the polyfill</a> until it become too much of a headache. It works nicely when it does, but there are corner cases, like CORS problems, and it slows page loads by doing XHR requests for all your CSS links and reparsing them for the "position: sticky" declaration that the browser ignored.</p>

<p>Now I'm using <a href="https://github.com/bigspotteddog/ScrollToFixed" rel="nofollow noreferrer">ScrollToFixed</a>, which I like better than <a href="http://stickyjs.com" rel="nofollow noreferrer">StickyJS</a> because it doesn't mess up my layout with a wrapper.</p>


blocks|key|724289|text|目前没有本机解决方案。见定位位置:当前处于“卡住”状态的粘性元素。但是，我有一个CoffeeScript解决方案，它可以同时使用本机position:+sticky和实现粘性行为的填充。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|724290|将“粘滞”类添加到要粘贴的元素中：|724291|.sticky+{
++position:+-webkit-sticky;
++position:+-moz-sticky;
++position:+-ms-sticky;
++position:+-o-sticky;
++position:+sticky;
++top:+0px;
++z-index:+1;
}|code-block|syntax|javascript|724292|CoffeeScript监视“粘滞”元素的位置，并在它们处于“粘滞”状态时添加“卡住”类：|724293|$+->+new+StickyMonitor

class+StickyMonitor

++SCROLL_ACTION_DELAY:+50

++constructor:+->
++++$(window).scroll+@scroll_handler+if+$('.sticky').length+>+0

++scroll_handler:+=>
++++@scroll_timer+%7C%7C=+setTimeout(@scroll_handler_throttled,+@SCROLL_ACTION_DELAY)

++scroll_handler_throttled:+=>
++++@scroll_timer+=+null
++++@toggle_stuck_state_for_sticky_elements()

++toggle_stuck_state_for_sticky_elements:+=>
++++$('.sticky').each+->
++++++$(this).toggleClass('stuck',+this.getBoundingClientRect().top+-+parseInt($(this).css('top'))+<=+1)|724294|注意:此代码仅适用于垂直粘性位置。|724295|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/25308823/targeting-positionsticky-elements-that-are-currently-in-a-stuck-state^0|1U|G|C|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>There is currently no native solution. See <a href="https://stackoverflow.com/questions/25308823/targeting-positionsticky-elements-that-are-currently-in-a-stuck-state">Targeting position:sticky elements that are currently in a &#39;stuck&#39; state</a>. However I have a CoffeeScript solution that works with both native <code>position: sticky</code> and with polyfills that implement the sticky behavior.</p>

<p>Add 'sticky' class to elements you want to be sticky:</p>

<pre><code>.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
}
</code></pre>

<p>CoffeeScript to monitor 'sticky' element positions and add the 'stuck' class when they are in the 'sticky' state:</p>

<pre><code>$ -&gt; new StickyMonitor

class StickyMonitor

  SCROLL_ACTION_DELAY: 50

  constructor: -&gt;
    $(window).scroll @scroll_handler if $('.sticky').length &gt; 0

  scroll_handler: =&gt;
    @scroll_timer ||= setTimeout(@scroll_handler_throttled, @SCROLL_ACTION_DELAY)

  scroll_handler_throttled: =&gt;
    @scroll_timer = null
    @toggle_stuck_state_for_sticky_elements()

  toggle_stuck_state_for_sticky_elements: =&gt;
    $('.sticky').each -&gt;
      $(this).toggleClass('stuck', this.getBoundingClientRect().top - parseInt($(this).css('top')) &lt;= 1)
</code></pre>

<p>NOTE: This code only works for vertical sticky position.</p>


blocks|key|2835422|text|我知道这个问题提出已经有一段时间了，但我找到了一个很好的解决办法。插件stickybits在受支持的地方使用position:+sticky，并在元素“卡住”时将类应用于元素。我最近使用它取得了很好的效果，在撰写本文时，它是一个积极的开发(这对我来说是一个好处)+:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2835423|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/dollarshaveclub/stickybits^0|1I|G|Z|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>I know it has been some time since the question was asked, but I found a good solution to this. The plugin <a href="https://github.com/dollarshaveclub/stickybits" rel="nofollow noreferrer">stickybits</a> uses <code>position: sticky</code> where supported, and applies a class to the element when it is 'stuck'. I've used it recently with good results, and, at time of writing, it is active development (which is a plus for me) :)</p>


blocks|key|2047422|text|如果有人通过谷歌来到这里，那么他们自己的一名工程师就有了一个使用IntersectionObserver、自定义事件和哨兵的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2047423|https://developers.google.com/web/updates/2017/09/sticky-headers|offset|length|2047424|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>If anyone gets here via Google one of their own engineers has a solution using IntersectionObserver, custom events, and sentinels:</p>

<p><a href="https://developers.google.com/web/updates/2017/09/sticky-headers" rel="noreferrer">https://developers.google.com/web/updates/2017/09/sticky-headers</a></p>


blocks|key|2835478|text|我想出了这个解决方案，它很有魅力，而且很小。:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2835479|不需要额外的元素。|2835480|它确实运行在窗口滚动事件上，尽管这是一个小的缺点。|2835481|apply_stickies()

window.addEventListener('scroll',+function()+{
++++apply_stickies()
})

function+apply_stickies()+{
++++var+_$stickies+=+[].slice.call(document.querySelectorAll('.sticky'))
++++_$stickies.forEach(function(_$sticky)+{
++++++++if+(CSS.supports+&&+CSS.supports('position',+'sticky'))+{
++++++++++++apply_sticky_class(_$sticky)
++++++++}
++++})
}

function+apply_sticky_class(_$sticky)+{
++++var+currentOffset+=+_$sticky.getBoundingClientRect().top
++++var+stickyOffset+=+parseInt(getComputedStyle(_$sticky).top.replace('px',+''))
++++var+isStuck+=+currentOffset+<=+stickyOffset

++++_$sticky.classList.toggle('js-is-sticky',+isStuck)
}|code-block|syntax|javascript|2835482|注意:此解决方案不考虑具有底部粘性的元素。这只适用于像粘头之类的东西。不过，它很可能会被改编成考虑到底部的粘性。|2835483|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I came up with this solution that works like a charm and is pretty small. :)</p>

<p>No extra elements needed.</p>

<p>It does run on the window scroll event though which is a small downside.</p>

<pre class="lang-js prettyprint-override"><code>apply_stickies()

window.addEventListener('scroll', function() {
    apply_stickies()
})

function apply_stickies() {
    var _$stickies = [].slice.call(document.querySelectorAll('.sticky'))
    _$stickies.forEach(function(_$sticky) {
        if (CSS.supports &amp;&amp; CSS.supports('position', 'sticky')) {
            apply_sticky_class(_$sticky)
        }
    })
}

function apply_sticky_class(_$sticky) {
    var currentOffset = _$sticky.getBoundingClientRect().top
    var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace('px', ''))
    var isStuck = currentOffset &lt;= stickyOffset

    _$sticky.classList.toggle('js-is-sticky', isStuck)
}
</code></pre>

<p>Note: This solution doesn't take elements that have bottom stickiness into account. This only works for things like a sticky header. It can probably be adapted to take bottom stickiness into account though.</p>


blocks|key|724489|text|演示和IntersectionObserver+(使用技巧)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|724490|​|724491|//+get+the+sticky+element
const+stickyElm+=+document.querySelector('header')

const+observer+=+new+IntersectionObserver(+
++([e])+=>+e.target.classList.toggle('isSticky',+e.intersectionRatio+<+1),
++{threshold:+[1]}
);

observer.observe(stickyElm)|code-block|syntax|javascript|724492|body{+height:+200vh;+font:20px+Arial;+}

section{
++background:+lightblue;
++padding:+2em+1em;
}

header{
++position:+sticky;
++top:+-1px;+++++++++++++++++++++++/*+➜+the+trick+*/

++padding:+1em;
++padding-top:+calc(1em+%2B+1px);++++/*+➜+compensate+for+the+trick+*/

++background:+salmon;
++transition:+.1s;
}

/*+styles+for+when+the+header+is+in+sticky+mode+*/
header.isSticky{
++font-size:+.8em;
++opacity:+.5;
}|724493|<section>Space</section>
<header>Sticky+Header</header>|724494|724495|top值需要是-1px，否则元素将永远不会与浏览器窗口顶部相交(因此不会触发交叉观察者)。|style|CODE|724496|为了对抗隐藏内容的1px，应该在粘性元素的边框或填充中添加一个额外的1px空间。|724497|或者，如果您希望保持CSS原样(top:0)，则可以通过添加设置rootMargin:+'-1px+0px+0px+0px'+(如@mattrick在其答复中所示)，在交叉口观察者级别应用“更正”。|724498|使用老式的scroll事件侦听器演示：|724499|自动检测第一个可滚动父级|ordered-list-item|724500|控制滚动事件|724501|关注点的功能组合.分离|724502|事件回调缓存：scrollCallback+(如果需要可以解除绑定)|724503|724504|//+get+the+sticky+element
const+stickyElm+=+document.querySelector('header');

//+get+the+first+parent+element+which+is+scrollable
const+stickyElmScrollableParent+=+getScrollParent(stickyElm);

//+save+the+original+offsetTop.+when+this+changes,+it+means+stickiness+has+begun.
stickyElm._originalOffsetTop+=+stickyElm.offsetTop;


//+compare+previous+scrollTop+to+current+one
const+detectStickiness+=+(elm,+cb)+=>+()+=>+cb+&+cb(elm.offsetTop+!=+elm._originalOffsetTop)

//+Act+if+sticky+or+not
const+onSticky+=+isSticky+=>+{
+++console.clear()
+++console.log(isSticky)
+++
+++stickyElm.classList.toggle('isSticky',+isSticky)
}

//+bind+a+scroll+event+listener+on+the+scrollable+parent+(whatever+it+is)
//+in+this+exmaple+I+am+throttling+the+"scroll"+event+for+performance+reasons.
//+I+also+use+functional+composition+to+diffrentiate+between+the+detection+function+and
//+the+function+which+acts+uppon+the+detected+information+(stickiness)

const+scrollCallback+=+throttle(detectStickiness(stickyElm,+onSticky),+100)
stickyElmScrollableParent.addEventListener('scroll',+scrollCallback)



//+OPTIONAL+CODE+BELOW+///////////////////

//+find-first-scrollable-parent
//+Credit:+https://stackoverflow.com/a/42543908/104380
function+getScrollParent(element,+includeHidden)+{
++++var+style+=+getComputedStyle(element),
++++++++excludeStaticParent+=+style.position+===+"absolute",
++++++++overflowRegex+=+includeHidden+?+/(auto%7Cscroll%7Chidden)/+:+/(auto%7Cscroll)/;

++++if+(style.position+!==+"fixed")+
++++++for+(var+parent+=+element;+(parent+=+parent.parentElement);+){
++++++++++style+=+getComputedStyle(parent);
++++++++++if+(excludeStaticParent+&&+style.position+===+"static")+
++++++++++++++continue;
++++++++++if+(overflowRegex.test(style.overflow+%2B+style.overflowY+%2B+style.overflowX))+
++++++++++++return+parent;
++++++}

++++return+window
}

//+Throttle
//+Credit:+https://jsfiddle.net/jonathansampson/m7G64
function+throttle+(callback,+limit)+{
++++var+wait+=+false;++++++++++++++++++//+Initially,+we're+not+waiting
++++return+function+()+{+++++++++++++++//+We+return+a+throttled+function
++++++++if+(!wait)+{+++++++++++++++++++//+If+we're+not+waiting
++++++++++++callback.call();+++++++++++//+Execute+users+function
++++++++++++wait+=+true;+++++++++++++++//+Prevent+future+invocations
++++++++++++setTimeout(function+()+{+++//+After+a+period+of+time
++++++++++++++++wait+=+false;++++++++++//+And+allow+future+invocations
++++++++++++},+limit);
++++++++}
++++}
}|724505|header{
++position:+sticky;
++top:+0;

++/*+not+important+styles+*/
++background:+salmon;
++padding:+1em;
++transition:+.1s;
}

header.isSticky{
++/*+styles+for+when+the+header+is+in+sticky+mode+*/
++font-size:+.8em;
++opacity:+.5;
}

/*+not+important+styles*/

body{+height:+200vh;+font:20px+Arial;+}

section{
++background:+lightblue;
++padding:+2em+1em;
}|724506|<section>Space</section>
<header>Sticky+Header</header>|724507|724508|下面是一个React组件演示，它使用了第一种技术|724509|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/vsync/pen/bGbmqZe?editors=0110|1|https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API|2|https://stackoverflow.com/q/35939886/104380|3|https://stackoverflow.com/q/27078285/104380|4^0|0|2|0|3|K|1|0|0|0|0|0|0|0|3|7|4|0|9|3|Y|3|0|G|5|W|U|0|5|6|0|0|C|2|0|0|6|3|0|0|7|E|0|0|0|0|0|0|5|9|4|0^^$0|@$1|2|3|4|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]|$A|21|B|22|1|23]]|C|$]]|$1|D|3|E|5|6|7|24|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|25|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|26|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|27|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|28|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|29|8|@$A|2A|B|2B|R|S]|$A|2C|B|2D|R|S]]|9|@]|C|$]]|$1|T|3|U|5|6|7|2E|8|@$A|2F|B|2G|R|S]|$A|2H|B|2I|R|S]]|9|@]|C|$]]|$1|V|3|W|5|6|7|2J|8|@$A|2K|B|2L|R|S]|$A|2M|B|2N|R|S]]|9|@]|C|$]]|$1|X|3|Y|5|6|7|2O|8|@$A|2P|B|2Q|R|S]]|9|@]|C|$]]|$1|Z|3|10|5|11|7|2R|8|@]|9|@$A|2S|B|2T|1|2U]]|C|$]]|$1|12|3|13|5|11|7|2V|8|@]|9|@$A|2W|B|2X|1|2Y]]|C|$]]|$1|14|3|15|5|11|7|2Z|8|@]|9|@]|C|$]]|$1|16|3|17|5|11|7|30|8|@$A|31|B|32|R|S]]|9|@]|C|$]]|$1|18|3|E|5|6|7|33|8|@]|9|@]|C|$]]|$1|19|3|1A|5|H|7|34|8|@]|9|@]|C|$I|J]]|$1|1B|3|1C|5|H|7|35|8|@]|9|@]|C|$I|J]]|$1|1D|3|1E|5|H|7|36|8|@]|9|@]|C|$I|J]]|$1|1F|3|E|5|6|7|37|8|@]|9|@]|C|$]]|$1|1G|3|1H|5|6|7|38|8|@]|9|@$A|39|B|3A|1|3B]]|C|$]]|$1|1I|3|-4|5|6|7|3C|8|@]|9|@]|C|$]]]|1J|$1K|$5|1L|1M|1N|C|$1O|1P]]|1Q|$5|1L|1M|1N|C|$1O|1R]]|1S|$5|1L|1M|1N|C|$1O|1T]]|1U|$5|1L|1M|1N|C|$1O|1V]]|1W|$5|1L|1M|1N|C|$1O|1P]]]]

<h1><a href="https://codepen.io/vsync/pen/bGbmqZe?editors=0110" rel="noreferrer">Demo</a> with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="noreferrer">IntersectionObserver</a> (use a trick):</h1>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// get the sticky element
const stickyElm = document.querySelector('header')

const observer = new IntersectionObserver( 
  ([e]) =&gt; e.target.classList.toggle('isSticky', e.intersectionRatio &lt; 1),
  {threshold: [1]}
);

observer.observe(stickyElm)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{ height: 200vh; font:20px Arial; }

section{
  background: lightblue;
  padding: 2em 1em;
}

header{
  position: sticky;
  top: -1px;                       /* ➜ the trick */

  padding: 1em;
  padding-top: calc(1em + 1px);    /* ➜ compensate for the trick */

  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
header.isSticky{
  font-size: .8em;
  opacity: .5;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;Space&lt;/section&gt;
&lt;header&gt;Sticky Header&lt;/header&gt;</code></pre>
</div>
</div>
</p>
<p>The <code>top</code> value needs to be <code>-1px</code> or the element will never intersect with the top of the browser window (thus never triggering the <em>intersection observer</em>).</p>
<p>To counter this <code>1px</code> of hidden content, an additional <code>1px</code> of space should be added to either the border or the padding of the sticky element.</p>
<p> Alternatively, if you wish to keep the CSS as is (<code>top:0</code>), then you can apply the &quot;correction&quot; at the <em>intersection observer</em>-level by adding the setting <code>rootMargin: '-1px 0px 0px 0px'</code> (as <em>@mattrick</em> showed in his answer)</p>
<h1>Demo with old-fashioned <code>scroll</code> event listener:</h1>
<ol>
<li><a href="https://stackoverflow.com/q/35939886/104380">auto-detecting first scrollable parent</a></li>
<li><a href="https://stackoverflow.com/q/27078285/104380">Throttling the scroll event</a></li>
<li>Functional composition for concerns-separation</li>
<li>Event callback caching: <code>scrollCallback</code> (to be able to unbind if needed)</li>
</ol>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// get the sticky element
const stickyElm = document.querySelector('header');

// get the first parent element which is scrollable
const stickyElmScrollableParent = getScrollParent(stickyElm);

// save the original offsetTop. when this changes, it means stickiness has begun.
stickyElm._originalOffsetTop = stickyElm.offsetTop;


// compare previous scrollTop to current one
const detectStickiness = (elm, cb) =&gt; () =&gt; cb &amp; cb(elm.offsetTop != elm._originalOffsetTop)

// Act if sticky or not
const onSticky = isSticky =&gt; {
   console.clear()
   console.log(isSticky)
   
   stickyElm.classList.toggle('isSticky', isSticky)
}

// bind a scroll event listener on the scrollable parent (whatever it is)
// in this exmaple I am throttling the "scroll" event for performance reasons.
// I also use functional composition to diffrentiate between the detection function and
// the function which acts uppon the detected information (stickiness)

const scrollCallback = throttle(detectStickiness(stickyElm, onSticky), 100)
stickyElmScrollableParent.addEventListener('scroll', scrollCallback)



// OPTIONAL CODE BELOW ///////////////////

// find-first-scrollable-parent
// Credit: https://stackoverflow.com/a/42543908/104380
function getScrollParent(element, includeHidden) {
    var style = getComputedStyle(element),
        excludeStaticParent = style.position === "absolute",
        overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

    if (style.position !== "fixed") 
      for (var parent = element; (parent = parent.parentElement); ){
          style = getComputedStyle(parent);
          if (excludeStaticParent &amp;&amp; style.position === "static") 
              continue;
          if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) 
            return parent;
      }

    return window
}

// Throttle
// Credit: https://jsfiddle.net/jonathansampson/m7G64
function throttle (callback, limit) {
    var wait = false;                  // Initially, we're not waiting
    return function () {               // We return a throttled function
        if (!wait) {                   // If we're not waiting
            callback.call();           // Execute users function
            wait = true;               // Prevent future invocations
            setTimeout(function () {   // After a period of time
                wait = false;          // And allow future invocations
            }, limit);
        }
    }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>header{
  position: sticky;
  top: 0;

  /* not important styles */
  background: salmon;
  padding: 1em;
  transition: .1s;
}

header.isSticky{
  /* styles for when the header is in sticky mode */
  font-size: .8em;
  opacity: .5;
}

/* not important styles*/

body{ height: 200vh; font:20px Arial; }

section{
  background: lightblue;
  padding: 2em 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;Space&lt;/section&gt;
&lt;header&gt;Sticky Header&lt;/header&gt;</code></pre>
</div>
</div>
</p>
<hr />
<h2>Here's a <a href="https://codepen.io/vsync/pen/bGbmqZe?editors=0110" rel="noreferrer">React component demo</a> which uses the first technique</h2>


blocks|key|2835589|text|只要用香草JS就行了。您可以使用油门功能，从提交，以防止一些性能问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2835590|​|2835591|const+element+=+document.getElementById("element-id");

document.addEventListener(
++"scroll",
++_.throttle(e+=>+{
++++element.classList.toggle(
++++++"is-sticky",
++++++element.offsetTop+<=+window.scrollY
++++);
++},+500)
);|code-block|syntax|javascript|2835592|2835593|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Just use vanilla JS for it. You can use throttle function from lodash to prevent some performance issues as well.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const element = document.getElementById("element-id");

document.addEventListener(
  "scroll",
  _.throttle(e =&gt; {
    element.classList.toggle(
      "is-sticky",
      element.offsetTop &lt;= window.scrollY
    );
  }, 500)
);</code></pre>
</div>
</div>
</p>


blocks|key|2835595|text|我发现了一个与@vsync的答案有点相似的解决方案，但它不需要添加到样式表中所需的"hack“。您可以简单地更改IntersectionObserver的边界，以避免将元素本身移出视图端口之外：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2835596|const+observer+=+new+IntersectionObserver(callback,+{
++rootMargin:+'-1px+0px+0px+0px',
++threshold:+[1],
});

observer.observe(element);|code-block|syntax|javascript|2835597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found a solution somewhat similar to @vsync's answer, but it doesn't require the "hack" that you need to add to your stylesheets. You can simply change the boundaries of the IntersectionObserver to avoid needing to move the element itself outside of the viewport:</p>

<pre><code>const observer = new IntersectionObserver(callback, {
  rootMargin: '-1px 0px 0px 0px',
  threshold: [1],
});

observer.observe(element);
</code></pre>


blocks|key|2835647|text|@vsync的出色回答几乎是我所需要的，除了我通过Grunt“丑化”了我的代码，而Grunt需要一些旧的JavaScript代码样式。下面是我使用的调整脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2835648|var+stickyElm+=+document.getElementById('header');
var+observer+=+new+IntersectionObserver(function+(_ref)+{
++++var+e+=+_ref[0];
++++return+e.target.classList.toggle('isSticky',+e.intersectionRatio+<+1);
},+{
++++threshold:+[1]
});
observer.observe(+stickyElm+);|code-block|syntax|javascript|2835649|答案中的CSS没有变化。|2835650|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>@vsync 's excellent answer was almost what I needed, except I &quot;uglify&quot; my code via Grunt, and Grunt requires some older JavaScript code styles.  Here is the adjusted script I used instead:</p>
<pre><code>var stickyElm = document.getElementById('header');
var observer = new IntersectionObserver(function (_ref) {
    var e = _ref[0];
    return e.target.classList.toggle('isSticky', e.intersectionRatio &lt; 1);
}, {
    threshold: [1]
});
observer.observe( stickyElm );

</code></pre>
<p>The CSS from that answer is unchanged</p>


blocks|key|2835671|text|像这样的东西也适用于固定的滚动高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2835672|//+select+the+header
const+header+=+document.querySelector('header');
//+add+an+event+listener+for+scrolling
window.addEventListener('scroll',+()+=>+{
++//+add+the+'stuck'+class
++if+(window.scrollY+>=+80)+navbar.classList.add('stuck');
++//+remove+the+'stuck'+class
++else+navbar.classList.remove('stuck');
});|code-block|syntax|javascript|2835673|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Something like this also works for a fixed scroll height:</p>
<pre class="lang-js prettyprint-override"><code>// select the header
const header = document.querySelector('header');
// add an event listener for scrolling
window.addEventListener('scroll', () =&gt; {
  // add the 'stuck' class
  if (window.scrollY &gt;= 80) navbar.classList.add('stuck');
  // remove the 'stuck' class
  else navbar.classList.remove('stuck');
});
</code></pre>


blocks|key|2835700|text|当.is-stuck类处于卡住状态时，我在主题中使用这个片段将它添加到.site-header中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2835701|//+noinspection+JSUnusedLocalSymbols
(function+(document,+window,+undefined)+{

++++let+windowScroll;

++++/**
+++++*
+++++*+@param+element+{HTMLElement%7CWindow%7CDocument}
+++++*+@param+event+{string}
+++++*+@param+listener+{function}
+++++*+@returns+{HTMLElement%7CWindow%7CDocument}
+++++*/
++++function+addListener(element,+event,+listener)+{
++++++++if+(element.addEventListener)+{
++++++++++++element.addEventListener(event,+listener);
++++++++}+else+{
++++++++++++//+noinspection+JSUnresolvedVariable
++++++++++++if+(element.attachEvent)+{
++++++++++++++++element.attachEvent('on'+%2B+event,+listener);
++++++++++++}+else+{
++++++++++++++++console.log('Failed+to+attach+event.');
++++++++++++}
++++++++}
++++++++return+element;
++++}

++++/**
+++++*+Checks+if+the+element+is+in+a+sticky+position.
+++++*
+++++*+@param+element+{HTMLElement}
+++++*+@returns+{boolean}
+++++*/
++++function+isSticky(element)+{
++++++++if+('sticky'+!==+getComputedStyle(element).position)+{
++++++++++++return+false;
++++++++}
++++++++return+(1+>=+(element.getBoundingClientRect().top+-+parseInt(getComputedStyle(element).top)));
++++}

++++/**
+++++*+Toggles+is-stuck+class+if+the+element+is+in+sticky+position.
+++++*
+++++*+@param+element+{HTMLElement}
+++++*+@returns+{HTMLElement}
+++++*/
++++function+toggleSticky(element)+{
++++++++if+(isSticky(element))+{
++++++++++++element.classList.add('is-stuck');
++++++++}+else+{
++++++++++++element.classList.remove('is-stuck');
++++++++}
++++++++return+element;
++++}

++++/**
+++++*+Toggles+stuck+state+for+sticky+header.
+++++*/
++++function+toggleStickyHeader()+{
++++++++toggleSticky(document.querySelector('.site-header'));
++++}

++++/**
+++++*+Listen+to+window+scroll.
+++++*/
++++addListener(window,+'scroll',+function+()+{
++++++++clearTimeout(windowScroll);
++++++++windowScroll+=+setTimeout(toggleStickyHeader,+50);
++++});

++++/**
+++++*+Check+if+the+header+is+not+stuck+already.
+++++*/
++++toggleStickyHeader();


})(document,+window);|code-block|syntax|javascript|2835702|entityMap^0|1|9|Z|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>I'm using this snippet in my theme to add <code>.is-stuck</code> class to <code>.site-header</code> when it is in a stuck position:</p>
<pre><code>// noinspection JSUnusedLocalSymbols
(function (document, window, undefined) {

    let windowScroll;

    /**
     *
     * @param element {HTMLElement|Window|Document}
     * @param event {string}
     * @param listener {function}
     * @returns {HTMLElement|Window|Document}
     */
    function addListener(element, event, listener) {
        if (element.addEventListener) {
            element.addEventListener(event, listener);
        } else {
            // noinspection JSUnresolvedVariable
            if (element.attachEvent) {
                element.attachEvent('on' + event, listener);
            } else {
                console.log('Failed to attach event.');
            }
        }
        return element;
    }

    /**
     * Checks if the element is in a sticky position.
     *
     * @param element {HTMLElement}
     * @returns {boolean}
     */
    function isSticky(element) {
        if ('sticky' !== getComputedStyle(element).position) {
            return false;
        }
        return (1 &gt;= (element.getBoundingClientRect().top - parseInt(getComputedStyle(element).top)));
    }

    /**
     * Toggles is-stuck class if the element is in sticky position.
     *
     * @param element {HTMLElement}
     * @returns {HTMLElement}
     */
    function toggleSticky(element) {
        if (isSticky(element)) {
            element.classList.add('is-stuck');
        } else {
            element.classList.remove('is-stuck');
        }
        return element;
    }

    /**
     * Toggles stuck state for sticky header.
     */
    function toggleStickyHeader() {
        toggleSticky(document.querySelector('.site-header'));
    }

    /**
     * Listen to window scroll.
     */
    addListener(window, 'scroll', function () {
        clearTimeout(windowScroll);
        windowScroll = setTimeout(toggleStickyHeader, 50);
    });

    /**
     * Check if the header is not stuck already.
     */
    toggleStickyHeader();


})(document, window);

</code></pre>


<p>I'm using the new <code>position: sticky</code> (<a href="http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" rel="noreferrer">info</a>) to create an iOS-like list of content.</p>
<p>It's working well and far superior than the previous JavaScript alternative (<a href="http://jsbin.com/omanut/2/edit" rel="noreferrer">example</a>) however as far as I know no event is fired when it's triggered, which means I can't do anything when the bar hits the top of the page, unlike with the previous solution.</p>
<p><strong>I'd like to add a class (e.g. <code>stuck</code>) when an element with <code>position: sticky</code> hits the top of the page. Is there a way to listen for this with JavaScript? Usage of jQuery is fine.</strong></p>


Event to detect when position:sticky is triggered

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用新的position: sticky ()创建一个类似iOS的内容列表。它工作得很好，比以前的JavaScript alternative ()要好得多，但是据我所知，当它被触发时不会触发任何事件，这意味着我不能在条形图到达页面顶部时做任何事情，这与以前的解决方案不同。我想要添加一个类(例如，当带有** st...

问事件以检测何时触发位置:粘滞。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问事件以检测何时触发位置:粘滞。EN