我目前正在使用 elementor 在 Wordpress 中開發一個水平網站，并且對于標題而言一切正常。
我使用帶有 css 的 elementor html 元素將網站從垂直更改為水平并更改滾動方向。此外，我使用帶有 css 代碼的 html 元素來使錨點起作用。除此之外，我沒有使用任何其他干擾方向或標題的 html/css 代碼。
我想要達到的目標：
- 水平滾動時，標題應固定。使導航選單和徽標隨著視口移動。
我嘗試了來自 YouTube、stackoverflow 和 codepen 的多種解決方案（我嘗試過的代碼在這篇文章的末尾）。
我正在使用的代碼：
對于水平滾動：
<style>
@media (min-width:1024px){
.elementor {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-y: none;
scroll-snap-type: y mandatory;
}
.elementor-section-wrap{
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display:flex;
flex-direction: row;
width: 1100vw;
}
.section{ width:100vw; height:100vh;
scroll-snap-align: start}
::-webkit-scrollbar{
display:none;
}
@media (max-width:768px){
.elementor-section-wrap{
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
}
</style>
對于應該固定的水平標題：
<style>
@media (min-width:1024px){
.header-horizontal {
visibility: visible;
position: fixed;
}
}
</style>
我嘗試了不同的代碼解決方案：
position:sticky - 不起作用，因為我已經在使用溢位功能進行水平滾動。
https://codepen.io/gibatronic/pen/yLYzBze
修復了帶有水平滾動內容的標題（嘗試使用解決方案中的代碼但無法使其作業）
您可以在以下網址查看完整的網站：“https://designlab-bremen.info”。
提前致謝
uj5u.com熱心網友回復：
如果你正在嘗試這個
在寬度 > 1024px 的設備上，標題保持固定，而下面的頁面水平滾動
然后在打開正文標簽之后放置您的標題標簽。喜歡
<body ...>
<header ...>
...
</header>
...
...
</body>
我希望它會奏效。
我打開了您的網站并使用開發人員工具檢查了頁面源。比我復制了您的標題并將其位置更改為正好在正文標記之后的頂部。然后結果和你說的完全一樣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435260.html
標籤：html jQuery css WordPress 元素