Bạn đang xem : thanh điều hướng xuất hiện trên cuộn

Tôi đang cố tạo trang web đầu tiên của mình với hiệu ứng thị sai. Tôi đã nhận thấy sự cố với thanh điều hướng trên cùng cố định của mình – nó xuất hiện trên đầu thanh cuộn và phần tràn ẩn không ẩn nó. Tôi đã cố gắng đưa nó vào .main-container và nó giải quyết được vấn đề của tôi: nó không nằm trên đầu thanh cuộn nữa, tuy nhiên, nó không còn được cố định trên cùng. Nguyên nhân nào gây ra vấn đề này? Tôi có thể sửa nó như thế nào?

HTML:

 & lt; head & gt;
    & lt; link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" & gt; & lt; / link & gt;

& lt; / head & gt;

& lt; body & gt;

    & lt; nav class = "navbar navbar-light navbar-expand-lg" id = "top-navbar" & gt;
        & lt; a class = "navbar-brand" href = "#" & gt; brand & lt; / a & gt;

        & lt; button class = "navbar-toggler" id = 'nav-icon' type = "button" data-toggle = "sập" data-target = "# navbarSupportedContent" aria-control = "navbarSupportedContent" aria-expand = "false "aria-label =" Chuyển đổi điều hướng "& gt;
                                            & lt; span & gt; & lt; / span & gt;
                                            & lt; span & gt; & lt; / span & gt;
                                            & lt; span & gt; & lt; / span & gt;
                                            & lt; span & gt; & lt; / span & gt;
                                        & lt; / nút & gt;

        & lt; div class = "sập navbar-sập" id = "navbarSupportedContent" & gt;
            & lt; ul class = "navbar-nav m-auto" & gt;
                & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link" href = "#" & gt; link & lt; / a & gt;
                & lt; / li & gt;
            & lt; / ul & gt;
            & lt; ul class = "navbar-nav m-auto" & gt;
                & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link" href = '# 1' & gt; liên kết 1 & lt; / a & gt;
                & lt; / li & gt;
                & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link" href = '# 2' & gt; liên kết 2 & lt; / a & gt;
                & lt; / li & gt;
                & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link" href = '# 3' & gt; liên kết 3 & lt; / a & gt;
                & lt; / li & gt;
                & lt; li class = "nav-item" & gt;
                    & lt; a class = "nav-link" href = '# 4' & gt; liên kết 4 & lt; / a & gt;
                & lt; / li & gt;
            & lt; / ul & gt;

            & lt; ul class = "navbar-nav ml-auto mr-0" & gt;
                & lt; li class = "nav-item thả xuống" & gt;
                    & lt; a class = "nav-link dropdown-toggle" href = "#" id = "navbar-dropdown" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expand = "false "& gt; thả xuống & lt; / a & gt;

                    & lt; div class = "dropdown-menu" aria-labellingby = "navbarDropdown" & gt;
                        & lt; a class = "dropdown-item" href = "#" & gt; link & lt; / a & gt;

                        & lt; a class = "dropdown-item" href = "#" & gt; link & lt; / a & gt;
                    & lt; / div & gt;
                & lt; / li & gt;
            & lt; / ul & gt;
        & lt; / div & gt;
    & lt; / nav & gt;

    & lt; div class = 'main-container' & gt;

        & lt; div class = "parallax-container" & gt;

            & lt; div & gt;
                & lt; h1 & gt; title & lt; / h1 & gt;
            & lt; / div & gt;
            & lt; a href = "# 1" id = 'main-anchor' & gt;
                & lt; i class = "large material-icon" style = "font-size: 5rem" id = 'goto-icon' & gt;
                    keyboard_arrow_down
                & lt; / i & gt;
            & lt; / a & gt;
        & lt; / div & gt;

        & lt; div id = "wrapper" class = 'content-container' & gt;

            & lt; div id = "page-content" class = "page content" & gt;

                & lt; span class = "anchor" id = "1" & gt; & lt; / span & gt;

                & lt; section class = "card text-white bg-dark mb-5" & gt;
                    & lt; h4 class = "card-header" & gt; Tiêu đề & lt; / h4 & gt;

                    & lt; div class = "card-body" & gt;
                        & lt; p class = "card-text" & gt;
                            Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
                        & lt; / p & gt;
                    & lt; / div & gt;
                & lt; / phần & gt;

                & lt; span class = "anchor" id = "2" & gt; & lt; / span & gt;

                & lt; section class = "card text-white bg-dark mb-5" & gt;
                    & lt; h4 class = "card-header" & gt; Tiêu đề & lt; / h4 & gt;

                    & lt; div class = "card-body" & gt;
                        & lt; p class = "card-text" & gt;
                            Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
                        & lt; / p & gt;
                    & lt; / div & gt;
                & lt; / phần & gt;

                & lt; span class = "anchor" id = "3" & gt; & lt; / span & gt;

                & lt; section class = "card text-white bg-dark mb-5" & gt;
                    & lt; h4 class = "card-header" & gt; Tiêu đề & lt; / h4 & gt;

                    & lt; div class = "card-body" & gt;
                        & lt; p class = "card-text" & gt;
                            Một số văn bản ví dụ nhanh để xây dựng dựa trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
                        & lt; / p & gt;
                    & lt; / div & gt;
                & lt; / phần & gt;

                & lt; span class = "anchor" id = "4" & gt; & lt; / span & gt;

                & lt; section class = "card text-white bg-dark mb-5" & gt;
                    & lt; h4 class = "card-header" & gt; Tiêu đề & lt; / h4 & gt;

                    & lt; div class = "card-body" & gt;
                        & lt; p class = "card-text" & gt;
                            Một số văn bản ví dụ nhanh để xây dựng trên ttiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
                        & lt; / p & gt;
                    & lt; / div & gt;
                & lt; / phần & gt;
            & lt; / div & gt;
        & lt; / div & gt;
    & lt; / div & gt;

& lt; / body & gt;
 

SCSS

  // COLORS
$ tối hơn: # 212529;
$ tối: # 35383C;
$ xám: # 605F5E;
$ xanh lục: # 0F5158;
$ lightgreen: # 21686E;
$ xanh lam: # 7FA5A6;
$ màu xanh lam: # 96B5B6;
$ alabaster: # F1EBE1;
$ gainsboro: # CEE0DC;
// ĐỊA ĐIỂM
thân hình {
    font-family: sans-serif;
    background-color: $ dark;
    hành vi cuộn: mượt mà;
}

.main-container {
    phối cảnh: 1px;
    biến đổi kiểu: bảo tồn-3d;
    chiều cao: 100vh;
    tràn-x: ẩn;
    tràn-y: cuộn;
    background-color: $ dark;
    một {
        & amp;: liên kết,
        & amp;: đã thăm,
        & amp;: di chuột,
        & amp;: hoạt động {
            màu trắng;
        }
    }
}

.content-container {
    chức vụ: thân nhân;
    hiển thị: khối;
    chỉ số z: 1;
    background-color: $ dark;
    chiều cao tối thiểu: 100vh;
}

.Nội dung {
    margin: 0 auto;
    đệm: 75px 0;
}

.parallax-container {
    màu trắng;
    trái: -9px;
    hiển thị: flex;
    flex: 1 0 auto;
    flex-hướng: cột;
    chức vụ: thân nhân;
    z-index: -1;
    chiều cao: 100vh;
    chiều rộng: 101vw;
    justify-content: trung tâm;
    align-các mục: trung tâm;
    biến đổi: translateZ (-1px) scale (2);
    background: linear-gradient (rgba (0, 0, 0, 0.1), rgba (0, 0, 0, 0.7), rgba (0, 0, 0, 0.1));
    background-size: bìa;
    background-repeat: không lặp lại;
    background-position: trung tâm trung tâm;
}

// NAVBAR
# top-navbar {
    vị trí: cố định;
    đầu: 0;
    trái: 0;
    đúng: 0;
    kích thước phông chữ: 1rem;
    chỉ số z: 30;
    chiều cao dòng: 150%;
    màu nền: rgba (33, 37, 41, 0,1);
    đệm: 0 2,5vw;
    chuyển tiếp: chuyển đổi 1s .3s dễ dàng;
    box-shadow: 0 1px 50px -28px $ blue;
    & amp; .dark {
        nền: $ tối hơn;
    }
    & amp; .dark-show {
        nền: $ tối hơn;
    }
    & amp; .scrollUp {
        biến đổi: translateY (-100%);
    }
    * {
        màu: #bbccdd! important;
        font-weight: 500;
    }
    .navbar-brand {
        kích thước phông chữ: 1.5rem;
        font-weight: 600;
        đệm: 0;
    }
    .nav-item {
        text-biến đổi: chữ hoa;
        đệm: 0 8px;
        con trỏ: con trỏ;
        // & amp;: hover: not (.dropdown) {
        // background-color: rgba (33, 37, 41, 1);
        //}
        a: di chuột {
            màu sắc: trắng! quan trọng;
        }
    }
    .nav-link {
        lề: 10px 0;
        & amp; .active {
            màu sắc: trắng! quan trọng;
            border-bottom: trắng đặc 1px;
        }
    }
    .trình đơn thả xuống {
        màu viền: $ blue;
        chiều cao dòng: 2rem;
        background-color: rgba (0, 0, 0, 0.1);
        .dropdown-divider {
            lề: 0;
            border-top: 2px màu đen đặc;
        }
        .dropdown-item: hover {
            màu trắng;
            màu nền: rgba (33, 37, 41, 0,1);
        }
    }
    .navbar-toggler {
        màu: $ blue;
    }
}

// BÁNH HAMBURGER
# nav-icon {
    chiều rộng: 30px;
    chiều cao: 30px;
    chức vụ: thân nhân;
    lề: 0;
    -webkit-biến đổi: xoay (0deg);
    -moz-biến đổi: xoay (0deg);
    -o-biến đổi: xoay (0deg);
    biến đổi: xoay (0deg);
    -webkit-chuyển tiếp: .5 giây dễ dàng vào-ra;
    -moz-chuyển tiếp: .5 giây dễ dàng vào-ra;
    -o-chuyển đổi: .5s dễ dàng-vào-ra;
    chuyển tiếp: .5 giây dễ dàng vào-ra;
    con trỏ: con trỏ;
}

# nav-icon span {
    hiển thị: khối;
    vị trí: tuyệt đối;
    chiều cao: 3px;
    chiều rộng: 100%;
    nền: $ blue;
    bán kính đường viền: 3px;
    độ mờ: 1;
    trái: 0;
    -webkit-biến đổi: xoay (0deg);
    -moz-biến đổi: xoay (0deg);
    -o-biến đổi: xoay (0deg);
    biến đổi: xoay (0deg);
    -webkit-chuyển tiếp: .25 giây dễ dàng-vào-ra;
    -moz-chuyển tiếp: .25 giây dễ dàng-vào-ra;
    -o-chuyển đổi: .25 giây dễ dàng-vào-ra;
    chuyển tiếp: .25 giây dễ dàng vào-ra;
}

# nav-icon span: nth-child (1) {
    đầu trang: 1px;
}

# nav-icon span: nth-child (2),
# nav-icon span: nth-child (3) {
    đầu trang: 13px;
}

# nav-icon span: nth-child (4) {
    dưới cùng: 0px;
}

# nav-icon.open span: nth-child (1) {
    đầu trang: 15px;
    chiều rộng: 0%;
    trái: 50%;
}

# nav-icon.open span: nth-child (2) {
    -webkit-biến đổi: xoay (45deg);
    -moz-biến đổi: xoay (45deg);
    -o-biến đổi: xoay (45deg);
    biến đổi: xoay (45deg);
}

# nav-icon.open span: nth-child (3) {
    -webkit-biến đổi: xoay (-45deg);
    -moz-biến đổi: xoay (-45deg);
    -o-biến đổi: xoay (-45deg);
    biến đổi: xoay (-45deg);
}

# nav-icon.open span: nth-child (4) {
    đầu trang: 15px;
    chiều rộng: 0%;
    trái: 50%;
}

// NỘI DUNG
#Nội dung trang {
    chiều cao: 100vh! important;
    đệm: 15vh 10vw 5vh 10vw;
    lề: 0;
}

.mỏ neo {
    hiển thị: khối;
    chiều cao: 15vh;
    margin-top: -15vh;
    khả năng hiển thị: ẩn;
}

// TRUY VẤN PHƯƠNG TIỆN TRUYỀN THÔNG
@media only screen and (min-device-width: 320px) và (max-device-width: 480px) {
    # thanh bên {
        không trưng bày;
    }
    #Nội dung trang {
        lề: 0;
    }
}

JS:

  $ (document) .ready (function () {
    $ ('# sidebar'). css ('biến đổi', 'translateX (200px)')
    $ ('# nav-icon'). nhấp vào (function () {
        // $ (this) .toggleClass ('open');
        $ ('# top-navbar'). toggleClass ('dark-show');
    });
    $ ('. main-container'). scroll (function () {
        let pageHeight = $ ('. main-container'). height ();
        $ ('# top-navbar'). toggleClass ('dark', $ (this) .scrollTop () & gt; pageHeight);
        $ ('section'). each (function (i) {
            var position = $ (document) .scrollTop ();
            var header = $ ('# top-navbar'). NgoàiHeight ();
            if ($ (this) .position (). top & lt; = (position + header)) {
                var top = $ (this) .position (). top;
                console.log ($ (this) .position (). top & lt; = (position + header));
                $ (". nav-link.active"). removeClass ('active');
                $ (". nav-link"). eq (i) .addClass ('hoạt động');
            }
        })
    });
    $ ('. nav-link'). on ('click', function () {
        $ ('. nav-link'). removeClass ('hoạt động');
        $ (this) .addClass ('hoạt động');
    });
});

document.querySelectorAll ('a [href ^ = "#"]'). forEach (anchor = & gt; {
    anchorr.addEventListener ('click', function (e) {
        e.preventDefault ();

        document.querySelector (this.getAttribute ('href')). scrollIntoView ({
            hành vi: 'mượt mà'
        });
    });
});

let width = $ (window) .width ();
let height = $ (window) .height ();

nếu (chiều cao & gt; chiều rộng & amp; & amp; chiều cao & lt; 1024) {
    let position = $ ('# page-content'). scrollTop ();

    $ ('. main-container'). scroll (function () {
        let scroll = $ ('. main-container'). scrollTop ();
        if (cuộn & gt; vị trí) {
            $ ('# top-navbar'). addClass ('scrollUp');
        } khác {
            $ ('# top-navbar'). removeClass ('scrollUp');
        }
        vị trí = cuộn;
    });
}
 

Liên kết đến jsfiddle: https://jsfiddle.net/strzesia/fhqok4ym/19/

Xem Thêm  API là gì? Tầm quan trọng của Web API trong thiết kế website - api restful là gì


Xem thêm những thông tin liên quan đến chủ đề thanh điều hướng xuất hiện trên cuộn

Thiết kế thanh cuộn (scroll bar) đẹp như youtube với HTML & CSS

  • Tác giả: Alias
  • Ngày đăng: 2020-04-20
  • Đánh giá: 4 ⭐ ( 8480 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: html css alias
    HOW TO create scroll bar with overflow properties in html and css
    Trong video này mình hướng dẫn các bạn tạo thanh cuộc scroll bar với html và css nhé.
    Link source code__
    https://drive.google.com/drive/u/1/folders/1mZc-nMxA11e3zFlRcGoCv3xMoLuor_H7
    Link group học code: http://bit.ly/39eFZOi
    Link facebook cá nhân: http://bit.ly/38fi69c
    Link website: http://Alias.vn/
    Link đăng kí kênh để nhận video free: http://bit.ly/2SyBebr
    Đội ngũ Alias chuyên support IT cho các bạn ở đại học FPT Hà Nội – Ngoài ra còn support IT cho các bạn ở đại học Quốc Gia và Bách Khoa…
    Channel hướng dẫn các bạn lập trình C, C, C++, Java, Java desk, Java Web, jsp – servlet, web service, asp.net đồng thời hướng dẫn các bạn các thủ thuật hữu ích giúp cuộc sống đơn giản và dễ dàng hơn.
    Nếu nhạc nền bị gặp vấn đề bản quyền. Mong các bạn gửi mail tới trinhthehoan989@gmail.com. Mình sẽ trả lời lại trong vòng 2h ạ.

Bạn có biết cách hiển thị thanh cuộn trên Windows 11?

  • Tác giả: hocvienit.vn
  • Đánh giá: 4 ⭐ ( 1092 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Theo thiết lập mặc định trên Windows 11, thanh cuộn (scrollbar) thường xuất hiện trên các phiên bản hệ điều hành trước đó sẽ bị ẩn đi. Tuy nhiên, thiết lập này gây ra nhiều khó chịu cho bạn trong quá trình sử dụng máy tính. Vậy có cách nào để hiển thị thanh cuộn trên Windows 11?
Xem Thêm  SQL DATEPART Function (Transact SQL) - datepart

Bài 11: Scrollspy – Hiệu ứng điều hướng khi cuộn trang trong Bootstrap

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 4513 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu về scrollspy – hiệu ứng điều hướng khi cuộn trang trong Bootstrap. Ngoài ra, để kết hợp với scrollspy, mình cũng hướng dẫn thêm về cách tạo menu cố định khi cuộn trang.

Tin tức công nghệ cập nhật 24h

  • Tác giả: www.thegioididong.com
  • Đánh giá: 5 ⭐ ( 5299 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông tin công nghệ về điện thoại di động, máy tính bảng, laptop mới nhất được cập nhật hằng giờ. Tin về sản phẩm mới mắt, đánh giá sản phẩm, mẹo hay sử dụng…

Thêm thanh điều hướng ẩn hiện dưới chân trang khi cuộn trang

  • Tác giả: www.thietkeblogspot.com
  • Đánh giá: 3 ⭐ ( 8313 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn các bước thêm thanh điều hướng footer navigation bar ẩn hiện dưới chân trang khi cuộn trang vào Blogger

Thêm thanh cuộn hoặc nút xoay vào trang tính

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 9540 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm thanh cuộn hoặc nút xoay vào trang Excel tính. Các điều khiển cho phép bạn nhập nhanh hoặc thay đổi một phạm vi giá trị.

Hướng dẫn Hiển Thị Thanh Cuộn Trong ứng dụng Trong hđh win 10

  • Tác giả: huyanphat.com
  • Đánh giá: 5 ⭐ ( 2578 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết với nội dung tin tức thủ thuật pc với nội dung : chỉ dẫn Hiển Thị Thanh Cuộn Trong áp dụng Trong windows 10 trên trang Dịch vụ Tin học HUY AN PHÁT.
Xem Thêm  Cách liên kết CSS với tệp HTML trong phát triển web - bao gồm tệp css trong html

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php