使div在滚动时保持在顶部。

huangapple go评论63阅读模式
英文:

make the div stay at he top when scrolled

问题

我需要使这个div在我向下滚动查看更多内容时保持在顶部。我尝试在div中应用style={{position: sticky}},但似乎没有得到我期望的输出。还可以做什么?

英文:

I have a div element

 <div  className={ "flexRow alignItemsCenter margBot10 justifyContentSpaceBetween margTop24" } >
                  <h2 className="dialog__title subheading-text-medium fontMedium">Galley No:  {airCraftLoadingSel.galley}</h2>
          </div>

i need to make this div stay at the top when i scroll down to see more content .i have tried applying style={{position:sticky}} in the div but doesn't seems to give me the desired output.what else could be done.

答案1

得分: 0

Here's the translated code snippet:

<div style={{ position: "fixed", top: 0, zIndex: 1, width: "100%" }} className={"flexRow alignItemsCenter margBot10 justifyContentSpaceBetween margTop24"}>
    <h2 className="dialog__title subheading-text-medium fontMedium">Galley No:&nbsp;&nbsp;{airCraftLoadingSel.galley}</h2>
</div>

Please note that this code is written in ReactJS, and I have removed the extra curly braces around the style object, as well as the double quotes within it as requested.

英文:

If you want to make the div element stay at the top of the page when scrolling, you can try setting the position property to fixed and adjusting the top property to make sure it's positioned correctly. Here's code example

 &lt;div style={{position: &quot;fixed&quot;, top: 0, zIndex: 1, width: &quot;100%&quot;}} className={ &quot;flexRow alignItemsCenter margBot10 justifyContentSpaceBetween margTop24&quot; } &gt;
                  &lt;h2 className=&quot;dialog__title subheading-text-medium fontMedium&quot;&gt;Galley No:&amp;nbsp;&amp;nbsp;{airCraftLoadingSel.galley}&lt;/h2&gt;
          &lt;/div&gt;

Write the code above it's reactjs if not you can write the style without the "" and at the end you should have ;, and it should have only the {} not two {{}}.
I hope this answers your question.

huangapple
  • 本文由 发表于 2023年5月11日 01:23:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76221108.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定