blocks|key|2777042|text|如果您正在使用bootstrap，只需将fixed-top类添加到您的header中|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2777043|<div+class="header+fixed-top">
++This+is+my+sticky+header
</div>|code-block|syntax|javascript|2777044|否则，在css中，页眉位置应该是"position:fixed;"，它的宽度应该是"width:+100%25;"，然后将其他页面内容放在下面，就像这样：|2777045|https://jsfiddle.net/s071hnxL/|2777046|entityMap|0|LINK|mutability|MUTABLE|url^0|7|9|K|9|Z|6|0|0|G|H|15|E|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|D]|$9|11|A|12|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|13|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|14|8|@$9|15|A|16|B|D]|$9|17|A|18|B|D]]|E|@]|F|$]]|$1|N|3|O|5|6|7|19|8|@]|E|@$9|1A|A|1B|1|1C]]|F|$]]|$1|P|3|-4|5|6|7|1D|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|O]]]]

<p>If you are using <strong>bootstrap</strong>, just add <code>fixed-top</code> class to your <code>header</code>:</p>

<pre><code>&lt;div class="header fixed-top"&gt;
  This is my sticky header
&lt;/div&gt;
</code></pre>

<p>Otherwise, with css, header position should be <code>"position:fixed;"</code> and its width <code>"width: 100%;"</code> and then place other page content below like this fiddle:</p>

<p><a href="https://jsfiddle.net/s071hnxL/" rel="nofollow noreferrer">https://jsfiddle.net/s071hnxL/</a></p>


blocks|key|5429938|text|position:+sticky运行得很好。您看不到它的效果的原因是因为应用于div的position+(而不是可见文本)和div的宽度，它占用了其父100%25的div，在本例中是body。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5429939|所以当你水平滚动时，你仍然在div里面，它占据了整个可用的宽度空间。|5429940|现在，如果你想在不考虑滚动的情况下查看div.header中的内容，将它的宽度修改为width:+100vw，它应该可以正常工作。|5429941|您可以通过将body的width设置为140%25并将.header设置为100vw进行验证|5429942|万事如意。干杯!|5429943|entityMap^0|0|G|13|3|17|8|1Q|3|23|4|2H|4|0|0|J|A|16|C|0|6|4|B|5|J|4|P|7|Z|5|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1J|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|O|$]]

<p><code>position: sticky</code> is working fine. The reason that you're unable to see it's effect is because of the <code>position</code> applied on <code>div</code>(not the visible text) and the width of the <code>div</code>, which is taking up <code>100%</code> of its parent's div, which in this case is <code>body</code>.<br/> So when you're scrolling horizontally, you're still inside the div, which is taking up the complete width space available.<br/>
Now if you want to view the content inside <code>div.header</code> irrespective of the scroll, modify its width as <code>width: 100vw</code> and it should work fine.<br/>
You can verify by setting the <code>width</code> of <code>body</code> to <code>140%</code> and <code>.header</code> to be <code>100vw</code><br/>
All the best. Cheers!</p>


blocks|key|2714642|text|一种更好的方法是在html上设置overflow-x:+scroll;。这将解决问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2714643|请注意，根据规范，粘滞不会在有溢出的元素中工作。This+is+a+known+issue|2714644|因此，尝试将javascript与position:fixed结合使用。|2714645|​|2714646|$(window).scroll(function()+{
++if(+$(this).scrollTop()+>+0+)+{
++++$('.header').addClass('sticky');
++}+else+{
++++$('.header').removeClass('sticky');
++}
});|code-block|syntax|javascript|2714647|html,
body+{
++width:+100%25;
++background-color:+red;
++opacity:+0.9;
++padding:+0;
++margin:+0;
++overflow-x:+scroll;
}

.header+{
++width:+100%25;
++background-color:+gray;
++height:+100px;
++padding:+0;
}

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

.pt-100{
++padding-top:+100px;
}

.container+{
++display:+flex;
}

.child+{
++width:+120px;
++min-width:+120px;
++max-width:+120px;
++border:+1px+solid+#D8D8D8;
++background-color:+white;
++font-weight:+bold;
++word-wrap:+break-word;
}

.bigdiv+{
++width:+1000px;
++height:+1000px;
}|2714648|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class="header">
++This+is+my+sticky+header
</div>

<div+class="container">
++<div+class="child">
++++child1
++</div>
++<div+class="child">
++++child2
++</div>
++<div+class="child">
++++child3
++</div>
++<div+class="child">
++++child4
++</div>
++<div+class="child">
++++child5
++</div>
++<div+class="child">
++++child6
++</div>
++<div+class="child">
++++child7
++</div>
++<div+class="child">
++++child8
++</div>
++<div+class="child">
++++child9
++</div>
++<div+class="child">
++++child
++</div>
</div>
<div+class="bigdiv">
++Very+long+div
</div>|2714649|2714650|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky^0|G|J|0|O|L|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1D|8|@]|D|@]|E|$O|P]]|$1|S|3|T|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|U|3|K|5|6|7|1F|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>A better approach would be set <code>overflow-x: scroll;</code> on your html. 
This will solve the issue.</p>

<p>Note that sticky, by specification, will not work inside element with overflow.
<a href="https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky">This is a known issue</a></p>

<p>Hence, try using javascript in combination with <em>position:fixed</em></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>$(window).scroll(function() {
  if( $(this).scrollTop() &gt; 0 ) {
    $('.header').addClass('sticky');
  } else {
    $('.header').removeClass('sticky');
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  width: 100%;
  background-color: red;
  opacity: 0.9;
  padding: 0;
  margin: 0;
  overflow-x: scroll;
}

.header {
  width: 100%;
  background-color: gray;
  height: 100px;
  padding: 0;
}

.sticky {
  position:fixed;
  top:0;
  width: 100%;
  left:0;
}

.pt-100{
  padding-top: 100px;
}

.container {
  display: flex;
}

.child {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv {
  width: 1000px;
  height: 1000px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="header"&gt;
  This is my sticky header
&lt;/div&gt;

&lt;div class="container"&gt;
  &lt;div class="child"&gt;
    child1
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child2
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child3
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child4
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child5
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child6
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child7
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child8
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child9
  &lt;/div&gt;
  &lt;div class="child"&gt;
    child
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="bigdiv"&gt;
  Very long div
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a header that I would like to be sticky both during vertical and horizontal scroll. I would like it to be sticky due to the height of the header being dynamic(otherwise I could use fixed if I'm not mistaken).</p>

<p>I have played around with a fiddle with no success :(</p>

<p><a href="https://jsfiddle.net/Viktor/39v0gzjh/22/" rel="nofollow noreferrer">https://jsfiddle.net/Viktor/39v0gzjh/22/</a></p>

<p>CSS:</p>

<pre><code>html, body{
  width:100%;
  background-color:red;
  opacity:0.9;
  padding:0;
  margin:0;
}

.header{
  position:sticky;
  top:0;
  left:0;
  background-color:gray;
  height: 100px;
  padding:0;
}

.container{
  display: flex;
}

.child{
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv{
  width:1000px;
  height:1000px;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="header"&gt;
  This is my sticky header
&lt;/div&gt;

&lt;div class="container"&gt;
  &lt;div class="child"&gt;
  child1
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child2
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child3
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child4
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child5
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child6
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child7
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child8
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child9
  &lt;/div&gt;
  &lt;div class="child"&gt;
  child
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="bigdiv"&gt;
  Very long div
&lt;/div&gt;
</code></pre>


Sticky header scrolls out of view when scrolling horizontally

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有一个标题，我想在垂直和水平滚动期间粘性。我希望它是粘性的，因为头部的高度是动态的(否则，如果我没有弄错，我可以使用fixed )。我玩了一把小提琴，但没有成功：CSS：html, body{  width:100%;  background-color:red;  opacity:0.9;  padding:0; ...

问当水平滚动时，粘性标题滚动出视线
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当水平滚动时，粘性标题滚动出视线EN