Tôi sử dụng điều này cho tiêu đề của mình, nó sẽ thay đổi khi tôi cuộn lên và xuống trang. Tôi nhận thấy rằng nó không phản hồi, vì vậy tôi muốn hỏi liệu bạn có biết cách làm cho nó phản hồi không. Giống như thay đổi 0-690 thành tỷ lệ phần trăm để nó hoạt động trên thiết bị di động và màn hình TV.
HTML
CSS
.header-1 {
màu nền:dimgray;
display: block;
}
.header-2 {
màu nền:dimgray;
}
.header-3 {
màu nền:dimgray;
}
.tiêu đề {
position: fixed;
top: 0;
left: 0;
chiều cao: 8vmax;
width: 100%;
display: none;
khả năng hiển thị:ẩn;
quá trình chuyển đổi: khả năng hiển thị .4s, độ mờ .4s dễ ra vào;độ mờ:0;
cỡ chữ:4vmax;phần đệm:1.58vmax;màu:trắng;
}
Điều gì sẽ xảy ra nếu thay vì dựa trên pixel, bạn kiểm tra xem phần tử có đến đầu trang rồi thay đổi tiêu đề không?
Chúng tôi gọi những yếu tố này là "kích hoạt". Xem mã bên dưới để biết ví dụ về cách chúng hoạt động.
hãy cập nhậtHeader = () => {
hãy cuộnTop = $(window).scrollTop(),
triggerTitle = "Xin chào";
$('.trigger').each((i, el) => {
hãy để topPos = $(el).offset().top,
khoảng cách = topPos - ScrollTop;
nếu (khoảng cách < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}
$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);
body {
margin: 0;
}
#thùng chứa {
chiều cao: 1000px;
}
tiêu đề {
width: 100%;
position: fixed;
top: 0;
màu nền: đỏ;
}
P {
lề: 200px 10px;
}
kích hoạt1
kích hoạt2
kích hoạt3
Khi bạn cuộn xuống trang, mỗi trình kích hoạt sẽ đến đầu trang và văn bản trong tiêu đề sẽ thay đổi thành văn bản của trình kích hoạt mới nhất. tiêu đề dữ liệu
giá trị. Bạn có thể đặt các trình kích hoạt này một cách thích hợp phía trên mỗi phần của trang web để, bất kể kích thước màn hình, tiêu đề sẽ cập nhật vào đúng thời điểm. Đây là một codepen .
biên tập
Hãy thử sử dụng JS này để có khả năng tương thích tối đa (không liên quan đến es6).
hàm cập nhậtHeader() {
var ScrollTop = $(window).scrollTop(),
triggerTitle = "Xin chào";
$('.trigger').each(function(i, el) {
var topPos = $(el).offset().top,
khoảng cách = topPos - ScrollTop;
nếu (khoảng cách < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}
$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);
Tôi là một lập trình viên xuất sắc, rất giỏi!