2 Câu hỏi: Điều gì còn thiếu trong javascript của tôi cho một thanh điều hướng biến mất?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi muốn tránh jQuery để tôi có thể cảm nhận tốt hơn về Javascript. Hiện tại tôi có một Codepen được thiết lập để hiển thị phần lớn dự án đầu tiên của tôi. Tôi biết mã có lẽ là cẩu thả và tôi là người mới bắt đầu. Tôi chỉ đơn giản muốn làm cho JS hoạt động với thanh điều hướng của tôi biến mất hoàn toàn trênScSc thì tôi sẽ tối ưu hóa nó từ đó. Cảm ơn!

Tôi đã tìm kiếm youtube, google, SO nhưng dường như mọi người đều sử dụng jQuery.

https://codepen.io/dev20tx/pen/wbKyJq

CSS:

.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 0.8;
z-index: 2;
}

Và Javascript:

window.onscroll = function() {navFunction()};

function navFunction() {
  if (document.body.scrollTop > 50 || 
    document.documentElement.scrollTop > 50) {
    document.queryselector(".nav").className = "test";
  } else {
    document.queryselector(".nav").className = "";
  }
}

Biến mất thanh điều hướng.

    
2
2 Câu trả lời                              2                         

Tôi đã cập nhật codepen tại https://codepen.io/anon/pen/rgOdXy

Sau đây là mã JavaScript được cập nhật, vấn đề đầu tiên là bạn đã đính kèm trình nghe sự kiện vào window, thay vì phần tử được cuộn và lỗi thứ hai là lỗi chính tả của phương thức querySelector

function navFunction(e) {
  if (e.target.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector(".nav").className = "nav test";
  } else {
    document.querySelector(".nav").className = "nav";
  }
}

document.querySelector(".container").addEventListener("scroll",navFunction);
    
3
2019-05-08 16: 49: 53Z

Được rồi, vì vậy, một vài điều.

Đầu tiên, queryselector phải là querySelector (có chữ S viết hoa). Cũng lưu ý rằng việc cài đặt .nav className thành "test" hoặc "" sẽ xóa lớp "nav" khỏi thành phần đó.

Thứ hai, bạn nên đảm bảo bạn đính kèm sự kiện onscroll sau khi trang đã được tải.

Cuối cùng, bạn đang đính kèm sự kiện onscroll vào cửa sổ, nhưng bạn thực sự muốn đính kèm nó vào phần tử .container, vì đó là phần tử bạn đang cuộn.

Tôi không chỉ ném toàn bộ giải pháp vào lòng, vì dường như bạn muốn chơi xung quanh mình một chút. Nếu bạn muốn có một câu trả lời phức tạp hơn, đừng ngần ngại hỏi.

    
1
2019-05-08 16: 41: 47Z
  1. Tôi không thể tin rằng mình đã không viết hoa. Cảm ơn, giữa câu trả lời của bạn và câu hỏi dưới đây tôi nhận ra lỗi lầm của mình.
    2019-05-08 16: 57: 32Z
nguồn đặt đây