滾動到導航欄后，我想使其停留在頂部，但是它不起作用，我也不知道為什么。如果可以的話請幫我，這是我的HTML和CSS代碼：.nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; }<nav style="position: sticky; position: -webkit-sticky;"> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav>
3 回答
慕后森
TA貢獻1802條經驗 獲得超5個贊
粘性定位是相對定位和固定定位的混合。將該元素視為相對位置，直到它超過指定的閾值為止，此時將其視為固定位置。
...
您必須指定的至少一個閾值top，right，bottom，或left為粘稠定位像預期的那樣。否則，將無法與相對位置區分開。[資料來源：MDN ]
因此，在您的示例中，您必須使用top屬性來定義最終應粘貼的位置。
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
慕萊塢森
TA貢獻1810條經驗 獲得超4個贊
我碰到的幾件事：
當您的粘性元素是組件（角度等）時
如果“粘性”元素本身是帶有自定義元素選擇器的組件，例如名為的角度組件<app-menu-bar>，則需要在組件的css中添加以下內容：
:host { display: block; }
要么
app-menu-bar { display: block; } // (in the containing component's css)
尤其是iOS上的Safari似乎display:block甚至需要app-root角度應用程序的根元素，否則它不會卡住。
如果要創建一個組件，定義組件內部的CSS（影子DOM /封裝樣式），確保position: sticky被應用到“外”選擇（例如，app-menu-bar在devtools應顯示粘的位置），而不是一個頂級div 中組件。使用Angular，這可以通過:host組件的CSS中的選擇器來實現。
:host
{
position: sticky;
display: block; // this is the same as shown above
top: 0;
background: red;
}
其他
如果粘滯元素后面的元素具有固定背景，則必須添加以下內容以阻止其在下面滑動：
.sticky-element { z-index: 100; }
.parent-of-sticky-element { position: relative; }
如果使用top，則粘性元素必須首先（在內容之前），如果使用，則必須在其之后bottom。
在overflow: hidden包裝元素上使用會帶來一些麻煩，通常會殺死里面的粘性元素。更好地解釋了這個問題
當屏幕鍵盤可見時，移動瀏覽器可能會禁用固定/固定位置的項目。我不確定確切的規則（任何人都知道），但是當鍵盤可見時，您正在查看進入窗口的某種“窗口”，并且您將無法輕易將東西固定在窗口上屏幕的實際可見頂部。
確保您具有：
position: sticky;
并不是
display: sticky;
其他可用性問題
如果您的設計要求將東西粘在移動設備的屏幕底部，請務必謹慎。例如，在iPhone X上，它們顯示一條細線以指示滑動區域（以返回首頁），并且該區域內的元素不可單擊。因此，如果您粘貼某些東西，請務必在iPhone X上測試用戶可以激活它。如果人們無法點擊“立即購買”按鈕，那就不好了！
如果您要在Facebook上做廣告，則該網頁將顯示在Facebook的移動應用程序的“網絡視圖”控件中。特別是在顯示視頻時（您的內容僅在屏幕的下半部分開始）-它們通常將頁面放在可滾動的視口中，從而完全弄亂了粘性元素，實際上使粘性元素從頁面頂部消失了。確保在實際廣告的環境中進行測試，而不僅僅是在手機的瀏覽器甚至Facebook的瀏覽器中進行測試，因為兩者的行為可能會有所不同。
- 3 回答
- 0 關注
- 1456 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消