简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
對元素應用position: fixed會破壞由display: flex控制的內容的對齊方式。
P粉131455722
P粉131455722 2023-08-02 17:11:54
0
1
408
<p>我需要。 word和。 line元素被固定到視窗的頂部時，頁面被滾動-在他們最初的位置，即行是低於單字。 <br /><br />我設法修復了。 word與position: sticky，但面臨兩個問題:<br /></p><p><code></code><code></code></p> 當我將sticky應用於。 line時，它會「跳到」單字上方，我不知道如何將其固定在視窗的頂部，但強制它保持在。 word元素下方<br />黏性原本不是正確的值-當你開始滾動時，它會「搖晃」文字。正確的值是固定的-它工作得很好，我寧願寧願使用它!然而，它打破了。 warning類別(紅色字體)的位置:它應該在。 transcription文字的對面(水平)，但是固定值將這兩個類別的文字折在一起。 <br /><p><br /></p><p>這裡也是JS Bin與此「情況」。 </p><ol> </ol> <p><br /></p> <pre class="brush:css;toolbar:false;">.word { position: sticky; top: 0; z-index: 1; background-color: white; } .word { padding: 1vw 3vw 2% 3vw; } .word-details { display: flex; justify-content: space-between; align-items: baseline; } .transcription { font-weight: normal; } .warning { color: red; margin-left: auto; } .line { border-top: 2px solid #fdb239; } .meaning { list-style-type: none; counter-reset: item; hyphens: auto; font-size: calc(0.7em 1.5vw); } .meaning > li { position: relative; } .meaning > li::before { content: counter(item); counter-increment: item; position: absolute; top: 0; text-align: center; margin-left: calc(-0.7em - 2.5vw); } .meaning-word { margin-top: 50px; } .sentences { list-style-type: none; padding-left: 0; font-size: calc(0.7em 1.5vw); margin-top: 30px; } .sentences > li.sentence-ru { margin-top: 15px; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <body> <div class="word"> <span>Word</span> <div class="word-details"> <div class="transcription">/ transcription /</div>
COMMENT
;
<hr class="line"> <ol class="含義">
  • 意義1
    • 1
    0
    0
    P粉131455722
    P粉131455722

    全部回覆(1)
    P粉539055526
    P粉5390555262023-08-03 11:07:47 1樓

    在滾動頁面時，在頁面頂部保持幾個元素分開是很困難的，所以我建議一個更簡單的解決方案。你的貼上條的「跳躍」是因為黏貼條的初始位置與滾動時它在頁面頂部的位置不同

    1. 為了避免你的hr線消失，而滾動，我會把所有的元件，你想保持在頁面的頂部在一個容器，例如一個div，然後使該容器黏住。

      第二個問題是，因為預設的body margin (10px)設定你的sticky bar在開始的時候有點低。然後我們滾動頁面-主體邊距已經被滾動過了，你設定黏條絕對在頂部(top: 0;)，所以它必須跳到頂部這額外的10px。快速修復是將body頂部邊距設為0，然後您的貼上條在頁面頂部的位置始終相同。

      下面是更新後的程式碼片段。 



    body {
    margin-top: 0;
}

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.word {
    padding: 1vw 3vw 2% 3vw;
}

.word-details {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.transcription {
    font-weight: normal;
}

.warning {
    color: red;
    margin-left: auto;
}

.line {
    border-top: 2px solid #fdb239;
}

.meaning {
    list-style-type: none;
    counter-reset: item;
    hyphens: auto;
    font-size: calc(0.7em + 1.5vw);
}

.meaning > li {
    position: relative;
}

.meaning > li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    text-align: center;
    margin-left: calc(-0.7em - 2.5vw);          
}

.meaning-word {
    margin-top: 50px;
}

.sentences {
    list-style-type: none;
    padding-left: 0;
    font-size: calc(0.7em + 1.5vw);
    margin-top: 30px;                   
}

.sentences > li.sentence-ru {
    margin-top: 15px;                   
}
    <html>
    <body>

    <div class="sticky-container">
        <div class="word">
            <span>Word</span>
            <div class="word-details">
                <div class="transcription">/ transcription /</div>
                <div class="warning">COMMENT</div>
            </div>
        </div>
        <hr class="line">
    </div>

      <ol class="meaning">
            <li class="meaning-word">Meaning1</li>
            <ul class="sentences">
                <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
                <li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li>
            </ul>
        <li class="meaning-word">Meaning2</li>
            <ul class="sentences">
                <li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
            </ul>
      </ol>

    </body>
</html>
    點贊 +0
    新增回覆
    熱門專題
    更多>
    熱門文章
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！