[英]Unable to use position:sticky; while adding element through .innerHTML
我想讓菜單貼在頁面的頂部。 如果我只是將代碼添加到頁面，代碼就可以正常工作。 但是，我想使用 javascript，因為我希望能夠更改每個頁面上的菜單，而不必在每個頁面上手動執行。
document.getElementById('menu-js').innerHTML = `<div id="menu"> <div class="dropdown"> <button class="dropbtn">Button_1</button> <div class="dropdown-content"> <a href="/src">Link 1</a> <a href="/src">Link 2</a> <a href="/src">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Button_2</button> <div class="dropdown-content"> <a href="/src">Link 4</a> <a href="/src">Link 5</a> <a href="/src">Link 6</a> </div> </div> </div>`
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Arsenal|Rubik&display=swap'); #menu { background-color: white; top: 0px; left: 0px; position: sticky; padding-left: 10px; margin-top: -8px; margin-left: -30px; margin-right: -0.51%; border-bottom-color: black; border-bottom-style: solid; border-bottom: 5px; } .dropbtn { background-color: white; color: black; padding: 16px; font-size: 16px; border: none; margin: none; font-family: 'Arsenal'; } .dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f2d3d8; min-width: 200px; z-index: 1; font-family: 'Arsenal'; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ffd3b6; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #c06014; color: white; } #page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; } footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; } hr { margin-left: -20px; color: #c06014 }
<html> <head> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id='page-container'> <div id='content-wrap'> <h1>Content above menu</h1> <div id='menu-js'></div> <h1>body</h1> <h2>body</h2> </div> <footer> <hr>FOOTER</footer> </div> <script src='menu.js'></script> </body> </html>
如果可能，我只想使用這三種語言。 謝謝！
您的代碼在粘性屬性方面幾乎完美。 嘗試向menu-js div 添加一個max-height屬性（以像素為單位的值）。
將 class 添加到 position:sticky 但將 class 添加到每個粘性元素
[英]adding class to position:sticky but is adding class to every sticky element
將 position:sticky 添加到元素會導致滾動時出現跳躍行為
[英]Adding position:sticky to element causes jumpy behaviour on scroll
position:sticky: 當元素脫離正常流時添加樣式
[英]position:sticky : Adding style when the element detaches from normal flow
JavaScript 使用 innerHtml 在元素生成的元素上添加事件
[英]JavaScript adding event on element generated element with innerHtml
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.