使用CSS和HTML使網站的上部具有粘性-有解無憂

我試圖讓側邊欄和頁面頂部在您滾動時不移動（如 Twitter、Facebook 等）。我只使用 CSS 和 Html。

我設法讓側欄留在那里，但“主頁”部分不起作用。我嘗試使用位置：粘性，將父級的溢位-x 設定為自動，嘗試將其包裝到另一個 div 中并自動對齊：flex-start，但似乎沒有任何效果。

現在我把它放到一個較小的螢屏中，它看起來也將側欄與 Feed 重疊，并隱藏了小部件。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    --twitter-color: #50b7f5;
    --twitter-background: #e6ecf0;
}


/* Sidebar Styling Starts */

.sidebarOption {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sidebarOption .material-icons,
.fa-twitter {
    padding: 20px;
}

.sidebarOption h2 {
    font-weight: 800;
    font-size: 20px;
    margin-right: 20px;
}

.sidebarOption:hover {
    background-color: var(--twitter-background);
    border-radius: 30px;
    color: var(--twitter-color);
    transition: color 100ms ease-out;
}

.sidebarOption.active {
    color: var(--twitter-color);
}

.sidebar_tweet {
    width: 100%;
    background-color: var(--twitter-color);
    border: none;
    color: white;
    font-weight: 900;
    border-radius: 30px;
    height: 50px;
    margin-top: 20px;
}

body {
    display: flex;
    height: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    overflow-x: auto;
}

.sidebar {
    border-right: 1px solid var(--twitter-background);
    flex: 0.2;
    min-width: 250px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    left: 0;
    align-self: flex-start;
    position: sticky;
    top: 0;
    overflow-x: auto;
}

.fa-twitter {
    color: var(--twitter-color);
    font-size: 30px;
}


/* Sidebar Styling Ends */


/* Feed Styling Starts */

.feed {
    flex: 0.5;
    border-right: 1px solid var(--twitter-background);
    min-width: fit-content;
    overflow-x: auto;
    align-self: flex-start;
}

.feed-header {
    border: 1px solid var(--twitter-background);
    padding: 15px 20px;
    /* I DONT KNOW HOW TO MAKE THIS STICK */
}

.feed-header h2 {
    font-size: 20px;
    font-weight: 800;
}

.feed::-webkit-scrollbar {
    display: none;
}

.feed {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Styling Tweetbox Starts */

.tweetbox__input img {
    border-radius: 50%;
    height: 40px;
}

.tweetBox {
    padding-bottom: 10px;
    border-bottom: 8px solid var(--twitter-background);
    padding-right: 10px;
}

.tweetBox form {
    display: flex;
    flex-direction: column;
}

.tweetbox__input {
    display: flex;
    padding: 20px;
}

.tweetbox__input input {
    display: flex;
    margin-left: 20px;
    font-size: 20px;
    border: none;
    outline: none;
}

.tweetBox__tweetButton {
    background-color: var(--twitter-color);
    border: none;
    color: white;
    font-weight: 900;
    border-radius: 30px;
    width: 80px;
    height: 40px;
    margin-top: 20px;
    margin-left: auto;
}


/* Styling Tweetbox Ends */


/* Feed Styling Ends */


/* Post Styling Starts */

.post__avatar img {
    border-radius: 50%;
    height: 40px;
}

.post {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--twitter-background);
    padding-bottom: 10px;
}

.post__body img {
    width: 450px;
    object-fit: contain;
    border-radius: 20px;
}

.post__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.post__badge {
    font-size: 14px !important;
    color: var(--twitter-color);
    margin-right: 5px;
}

.post__headerSpecial {
    font-weight: 600;
    font-size: 12px;
    color: gray;
}

.post__headerText {
    font-size: 15px;
    margin-bottom: 5px;
}

.post__headerDescription {
    margin-bottom: 10px;
    font-size: 15px;
}

.post__body {
    flex: 1;
    padding: 10px;
}

.post__avatar {
    padding: 20px;
}


/* Post Styling Ends */


/* Widgets Styling Starts */

.widgets {
    flex: 0.3;
    right: 0;
    right: 0;
    align-self: flex-start;
    position: sticky;
    top: 0;
    overflow-x: auto;
}

.widgest__input {
    display: flex;
    align-items: center;
    background-color: var(--twitter-background);
    padding: 10px;
    border-radius: 20px;
    margin-top: 10px;
    margin-left: 20px;
}

.widgest__input input {
    border: none;
    background-color: var(--twitter-background);
    outline: none;
}

.widgets__searchIcon {
    color: gray;
}

.widgets__widgetContainer {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-left: 20px;
    padding: 20px;
    background-color: #f5f8fa;
    border-radius: 20px;
}

.widgets__widgetContainer h2 {
    font-size: 18px;
    font-weight: 800;
}

.card_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 18rem;
}

.card img {
    border-radius: 20px;
    width: 18rem;
}


/* Widgets Styling Ends */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twiter Clone</title>
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Sidebar Start -->
    <div class="sidebar">
        <i class="fab fa-twitter "></i>
        <div class="sidebarOption active ">
            <span class="material-icons ">home</span>
            <h2>Home</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons ">search</span>
            <h2>Explore</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons ">notifications_none</span>
            <h2>Notifications</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons ">mail_outline</span>
            <h2>Message</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons ">bookmark_border</span>
            <h2>Bookmarks</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons">list_alt</span>
            <h2>Lists</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons">perm_identity</span>
            <h2>Profile</h2>
        </div>

        <div class="sidebarOption">
            <span class="material-icons">more_horiz</span>
            <h2>More</h2>
        </div>
        <button class="sidebar_tweet">Tweet</button>
    </div>

    <!-- Sidebar End -->

    <!-- Feed Starts -->
    <div class="feed">

        <div class="feed_header">
            <h2>Home</h2>
        </div>
        <!-- Tweetbox Starts -->
        <div class="tweetBox">
            <form>
                <div class="tweetbox__input">
                    <img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
                    <input type="text" placeholder="What's happening">
                </div>
                <button class="tweetBox__tweetButton">Tweet</button>
            </form>
        </div>

        <!-- Tweetbox Ends -->

        <!-- Post Starts -->
        <div class="post">
            <div class="post__avatar">
                <img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
            </div>

            <div class="post__body">
                <div class="post__header">
                    <div class="post__headerText">
                        <h3>My Name
                            <span class="post_headerSpecial">
                                <span class="material-icons post__badge"> verified </span>@myname
                            </span>
                        </h3>
                    </div>
                    <div class="post_headerDescription">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div>
                </div>
                <img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
                <div class="post__footer">
                    <span class="material-icons">repeat</span>
                    <span class="material-icons">favorite_border</span>
                    <span class="material-icons">publish</span>
                </div>
            </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
            <div class="post__avatar">
                <img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
            </div>

            <div class="post__body">
                <div class="post__header">
                    <div class="post__headerText">
                        <h3>My Name
                            <span class="post_headerSpecial">
                                <span class="material-icons post__badge"> verified </span>@myname
                            </span>
                        </h3>
                    </div>
                    <div class="post_headerDescription">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div>
                </div>
                <img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
                <div class="post__footer">
                    <span class="material-icons">repeat</span>
                    <span class="material-icons">favorite_border</span>
                    <span class="material-icons">publish</span>
                </div>
            </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
            <div class="post__avatar">
                <img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
            </div>

            <div class="post__body">
                <div class="post__header">
                    <div class="post__headerText">
                        <h3>My Name
                            <span class="post_headerSpecial">
                                <span class="material-icons post__badge"> verified </span>@myname
                            </span>
                        </h3>
                    </div>
                    <div class="post_headerDescription">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div>
                </div>
                <img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
                <div class="post__footer">
                    <span class="material-icons">repeat</span>
                    <span class="material-icons">favorite_border</span>
                    <span class="material-icons">publish</span>
                </div>
            </div>
        </div>
        <!-- Post Ends -->

        <!-- Post Starts -->
        <div class="post">
            <div class="post__avatar">
                <img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
            </div>

            <div class="post__body">
                <div class="post__header">
                    <div class="post__headerText">
                        <h3>My Name
                            <span class="post_headerSpecial">
                                <span class="material-icons post__badge"> verified </span>@myname
                            </span>
                        </h3>
                    </div>
                    <div class="post_headerDescription">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div>
                </div>
                <img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
                <div class="post__footer">
                    <span class="material-icons">repeat</span>
                    <span class="material-icons">favorite_border</span>
                    <span class="material-icons">publish</span>
                </div>
            </div>
        </div>
        <!-- Post Ends -->
    </div>
    <!-- Feed Ends -->


    <!-- Widget Starts -->
    <div class="widgets">
        <div class="widgest__input">
            <span class="material-icons widgets__searchIcon"> search </span>
            <input type="text" placeholder="search Twitter">
        </div>
        <div class="widgets__widgetContainer">
            <h2>What's happening</h2>
            <div class="card_container">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
                    <div class="card-body">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                    </div>
                </div>
            </div>
        </div>
        <div class="widgets__widgetContainer">
            <h2>What's happening</h2>
            <div class="card_container">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
                    <div class="card-body">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Widget Ends -->


</body>

</html>

uj5u.com熱心網友回復：

在你的代碼，如果你洗掉overflow-x: auto 的.feed，并添加

.feed_header {    
  position: sticky; 
  top: 0;
}

滾動時，“主頁”標題會固定在頂部。

另一種方法是使用

.feed_header {    
  position: fixed; 
  top: 0;
}

.feed {
  margin-top: 16px;
}

這將在您滾動時將 feed_header 固定到螢屏頂部。然后，飼料容器需要在頂部留出一點間距，以確保 feed_header 不會重疊。

uj5u.com熱心網友回復：

overflow-x: auto;從.feedcss 中洗掉并將其添加到您的 css 中：

.feed_header, .tweetBox {
  position: sticky;
  top: 0;
}

uj5u.com熱心網友回復：

請插入以下代碼并對您的類進行更改。更改.feed-header為.feed_header

.feed_header {
            border: 1px solid var(--twitter-background);
            padding: 15px 20px;
            /* I DONT KNOW HOW TO MAKE THIS STICK */
            position: fixed; /*Code to add*/
            top: 0;  /*Code to add*/
        }

uj5u.com熱心網友回復：

添加到@John 的答案 - 有時您可能需要指定z-index:1在滾動時讓元素始終位于頂部。像這樣：

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;

uj5u.com熱心網友回復：

只需添加position: fixed側邊欄和提要標題。

.feed_header, .sidebar {    
  position: fixed; 
  top: 0;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400003.html

標籤：html css

上一篇：可拖動效果在Javascript中不起作用

下一篇：反應打開和關閉突出顯示