GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 14/10/2020 | 00:00 GMT+7

Cách xây dựng nhiều thanh bên cố định xếp chồng với CSS thuần túy và Bootstrap 4

Trong hướng dẫn này, bạn sẽ làm việc để xây dựng nhiều thanh bên cố định xếp chồng lên nhau mà không cần sử dụng bất kỳ JavaScript nào.

Ta sẽ thảo luận:

  • Nhiều Thanh bên Dính xếp chồng.
  • Lý do bạn muốn làm điều này.
  • Các vấn đề mà nhà phát triển gặp phải khi thực hiện với JavaScript hoặc plugin.
  • Kỹ thuật với CSS3 ( position: sticky ).
  • Kỹ thuật tương tự nhưng với CSS thuần túy.
  • Bunch of Bootstrap 4 Demos với Sticky Sidebars.

Nhiều thanh bên cố định xếp chồng

Tôi đang nói cụ thể về mẫu thiết kế này, trong đó có một thanh bên với nhiều nội dung cố định trong đó:

https://codepen.io/ncerminara/pen/zaGZGK

Có một vài lý do tại sao bạn có thể thực hiện điều này. Đến tên một vài:

  • Giúp chuyển phụ dễ dàng truy cập.
  • Làm nổi bật nội dung của bạn trong thanh bên nhiều hơn khi user cuộn.
  • Tăng số lần hiển thị quảng cáo, số nhấp chuột và số lượt xem trang web .

Cách JavaScript

Có nhiều plugin để thực hiện việc này:

Bạn cũng có thể tự viết một script nhỏ cho nó, nhưng tôi biết hầu hết mọi người có thể sử dụng plugin.

Cách hoạt động của JavaScript

Ý tưởng chung là tập lệnh hoặc plugin của bạn sẽ làm điều gì đó giống như thế này với JavaScript:

  1. Tính toán offset của một position: relative; phần tử từ đầu window khi cuộn.
  2. Khi độ offset của phần tử đó bằng hoặc về 0 , hãy tính vị trí (trái, trên hoặc phải) của phần tử đó so với window .
  3. Chuyển nó sang position: fixed; với đầu, trái hoặc phải được tính toán.
  4. Theo tùy chọn, hãy yêu cầu JS của bạn thực hiện lại các phép tính này khi nó đạt đến cuối giá trị root .
  5. Chuyển nó sang position: absolute; và đặt nó ở dưới cùng của container .

Nó không phải là quá tệ về công việc, nhưng chắc chắn là có rất nhiều thứ để tung hứng ngay cả khi bạn có một plugin đang cố gắng giải quyết tất cả điều này cho bạn.

Nhảy nội dung

Khi bạn chuyển từ position: relative; to position: fixed; chiều cao bị xóa khỏi phần tử mẹ. Điều này nghĩa là có thể có một “bước nhảy” nội dung.

Kiểm tra bản demo này:

https://codepen.io/ncerminara/pen/qKdmMz

Chiều rộng 100% so với Chiều rộng tự động

Nếu phần tử bạn muốn trở thành "dính" hiện tại là position: relative; và đáp ứng với containers (chiều rộng: 100%) và sau đó bạn swap position: fixed , bạn sẽ nhận được một phần tử nằm 100% cửa sổ hoặc ở chiều rộng tự động tùy thuộc vào CSS của bạn.

Đây là bản demo của ta . Lần này, hãy xem chiều rộng của phần tử "dính".

https://codepen.io/ncerminara/pen/qKdmMz

Cuối cùng, nếu bạn có một trang web phức tạp, với nhiều thanh bên dính trên một trang, đó là rất nhiều phép tính JavaScript xảy ra trên cuộn. CSS-Tricks có một hướng dẫn tuyệt vời giải thích về vấn đề này.

Đây là một codepen thể hiện điều đó, được chia từ Codepen của Chris Coyier trong bài báo đó:

https://codepen.io/ncerminara/pen/mKyvQr

Đây không phải là bí mật lớn nếu bạn đã chú ý đến CSS3. Đến đây bạn có thể làm cho bất kỳ phần tử nào về cơ bản hoạt động theo cách này với CSS thuần túy. Dễ thôi.

Bạn chỉ cần áp dụng CSS và ít nhất một thuộc tính hướng thường ở top :

.make-me-sticky {
    position: sticky;
    top: 0;
}

Bây giờ, tất cả các phần tử với lớp sẽ dính vào phần trên cùng của containers , tất cả các phần tử ở phía dưới.

Dưới đây là một số bản demo với Bootstrap 4 :

Thanh Sidey cơ bản với Bootstrap 4

https://codepen.io/ncerminara/pen/eKNROb

Hỗ trợ trình duyệt

Giống như bất kỳ điều gì thú vị với CSS3 hỗ trợ trình duyệt của nó không nhất quán. Nếu bạn có đủ khả năng để user IE không có các yếu tố dính, nó hoàn hảo. Bạn sẽ không phải lo lắng về bất kỳ dự phòng phức tạp nào bởi vì nó sẽ không triển khai “độ dính”.

/* Cross-Browser Support */
.make-me-sticky {
    position: relative; /* I am the fallback */

    /* Give it everything you got! (use an auto prefixer...) */
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;

    top: 0; /* Required  */
}

Xếp chồng Sticky Sidebars không có JavaScript

Bây giờ, hãy sử dụng CSS3 với một kỹ thuật thông minh để có một mẫu thiết kế thanh bên dính động xếp chồng động.

Nhắc lại, mục tiêu của ta là:

  • Có một thanh bên dính.
  • Khoảng trống trong số chúng để hiển thị nhiều mục dính riêng biệt.
  • Không sử dụng JavaScript.
  • Giữ nó đơn giản.

Nhiều bản trình diễn thanh bên cố định xếp chồng với CSS thuần túy

Đầu tiên, đây là bản demo của nó hoạt động trong thực tế. Đây là 100% CSS:

https://codepen.io/ncerminara/pen/VdLmoe

Làm thế nào nó hoạt động

Ta biết cách sử dụng CSS dính và nó chỉ dán một phần tử lên đầu và cuối containers dựa trên vị trí cuộn.

Vì vậy, tất cả những gì ta cần làm, là thêm một loạt các container được chia đều và cho chất dính bên trong chúng. Xem bản thiết kế này về những gì ta muốn tạo với chúng được đánh dấu vùng container 1 , vùng container 2 , vùng container 3 và vùng container n :

Nhiều thanh bên dính

Một mẹo đơn giản để mô phỏng các độ cao bằng nhau sẽ là sử dụng position: absolute; . Đây là một số mã mẫu:

/* "TITLE HERE" from above */
.title-section {
    width: 100%;
    height: auto
}


/* "CONTENT" From Above */
.content-section {

     /* size of my container minus sidebar width */
    width: calc(100% - 300px);

    /* Estimated height of largest sidebar in case of short content */
    min-height: 800px;
}

/* SIDEBAR */
.sidebar-section {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%; /* Super important! */
}

/* "SIDEBAR CONTAINER" in the blueprint */
.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;

    /* Position the items */
    &:nth-child(2) { top: 25%; }
    &:nth-child(3) { top: 50%; }
    &:nth-child(4) { top: 75%; }
}

Sau đó, HTML :

<article>
    <div class="container-fluid">
        <div class="col-md-12">

            <div class="title-section">
                <h1>TITLE HERE</h1>
            </div>

            <div class="inner-guts">


                <div class="content-section">
                    <h2>Content Section</h2>
                </div>


                <div class="sidebar-section">

                    <div class="sidebar-item">
                        <h3>Item 1</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 2</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 3</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 4</h3>
                    </div>

                </div>


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

Và cuối cùng là bản demo:

https://codepen.io/ncerminara/pen/zaGoPm?editors=1100#0

Tiếp theo, Hãy làm cho nó dính

Bây giờ, để làm cho nó trở nên hấp dẫn, ta chỉ cần thuộc tính CSS đó trong mỗi mục sidebar-items . Vì vậy, hãy thêm các dòng mã sau:

.make-me-sticky {
    position: sticky;
    top: 0;
}

<!-- Repeat this -->
<div class="sidebar-item">
    <div class="make-me-sticky">

    </div>
</div>

...

...

Ta chỉ sử dụng position: absolute; để xây dựng bố cục ta muốn sau đó position: sticky; để làm tất cả công việc của ta . Đây là bản thiết kế trực tiếp:

https://codepen.io/ncerminara/pen/VdLmoe

Các vấn đề bạn sẽ gặp phải

Dưới đây là một số vấn đề mà bạn có thể gặp phải với phương pháp này:

  • Vùng chứa nội dung ngắn hơn thanh bên.
  • Chiều cao của các mục trong thanh bên cao hơn containers riêng lẻ của chúng.
  • Bạn có số lượng khác nhau hơn 4 cho thanh bên của bạn.

Không có gì là hoàn hảo, nhưng đây là một kỹ thuật khá tuyệt vời. Bạn sẽ phải điều chỉnh CSS ở đây cho trường hợp sử dụng cá nhân của bạn , nhưng đó không phải là một giải pháp tồi chút nào vì ta không có JavaScript.

Biến nó thành Thư viện trợ giúp / Mixin cho các số lượng khác nhau

Đối với nội dung thay đổi động, tôi sẽ làm như thế này trong CSS. Mặc dù vậy, bạn có thể tạo ra một Mixin SASS / LESS thông minh hơn:

.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.has-4-items .sidebar-item {
    height: 25%;
    &:nth-child(2) { top: 25%; }
    &:nth-child(3) { top: 50%; }
    &:nth-child(4) { top: 75%; }
}
.has-3-items .sidebar-item {
    height: 33.333333%;
    &:nth-child(2) { top: 33.333333%; }
    &:nth-child(3) { top: 66.666666%; }
}
.has-2-items .sidebar-item {
    height: 50%;
    &:nth-child(2) { top: 50%; }
}

Bootstrap và Flexbox

Trong ví dụ này, bạn sẽ nhận thấy rằng ta đã sử dụng calc chính xác 300px cho chiều rộng thanh bên. Điều này là do các đơn vị quảng cáo có kích thước như vậy, vì vậy nó trở thành tiêu chuẩn trên web cho thanh bên.

Với Bootstrap 4, hệ thống lưới của họ theo mặc định là flexbox . Phần lớn nhất đối với hầu hết user là các cột có chiều cao bằng nhau theo mặc định với Bootstrap 4.

Kiểm tra bản trình diễn này cho thấy rằng:

https://codepen.io/ncerminara/pen/EjqbPj

Bây giờ, hãy tận dụng điều đó với các thanh bên dính.

Thay vì thực hiện thủ thuật calc, ta sẽ chỉ sử dụng hệ thống lưới Bootstrap 4. Điều duy nhất ta cần cập nhật trên mã của bạn là đảm bảo .make-me-sticky có phần đệm bên trái và bên phải trùng với máng xối cột của bạn.

Vì vậy, cài đặt mặc định sẽ là:

.make-me-sticky {
    position: sticky;
    top: 0;

    /* For Bootstrap 4 */
    padding: 0 15px;
}

Kiểm tra bản demo bên dưới:

https://codepen.io/ncerminara/pen/zaGZGK?editors=1100

Nhiều thanh bên cố định xếp chồng

Hãy làm điều này trong nhiều cột với số lượng khác nhau chỉ với CSS.

https://codepen.io/ncerminara/pen/VdLpzd

Kết luận

Đây là một hướng dẫn về cách sử dụng position: sticky; với Bootstrap 4 để tạo nhiều thanh bên dính hoặc nhiều thanh bên dính.

Tags:

Các tin liên quan

Cách tạo hộp trích dẫn nổi bật trên trang web của bạn bằng CSS (Phần 6)
2020-10-14
Cách thêm phần sơ yếu lý lịch hoặc lịch sử việc làm vào trang web của bạn bằng CSS (Phần 4)
2020-10-14
Cách xây dựng phần Giới thiệu về bản thân trên trang web của bạn bằng CSS (Phần 2)
2020-10-14
Cách xây dựng bố cục lát gạch bằng CSS (Phần 3)
2020-10-14
Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13