Đã sửa lỗi tiêu đề khi cuộn

Chào mọi người. Hôm nay tôi đã xem số liệu thống kê truy vấn tìm kiếm, qua đó mọi người vào blog và nhận thấy rằng có một số blog không liên quan chút nào. Không, không phải blog, mà là các bài báo.

Một trong số chúng cách sửa tiêu đề trang web? Tôi ngay lập tức quyết định chấn chỉnh tình hình và viết một bài báo, vì chủ đề này có liên quan và có những câu hỏi trong lĩnh vực này.

Nói chung, có một số cách để cuộn một trang. Bạn có thể sử dụng javascript, nhưng tôi không rành về chủ đề này và chỉ đang tìm hiểu nó. Vì vậy, hiện tại chúng ta sẽ thực hiện với CSS. Chúa phù hộ, sửa tiêu đề trang web(và không chỉ một chiếc mũ, mà bất kỳ yếu tố nào khác), bạn có thể làm điều đó với “chút máu” :)

Trên thực tế, phương pháp sửa một phần tử khi cuộn trang rất đơn giản và bạn sẽ ngạc nhiên khi vấn đề này được giải quyết dễ dàng như thế nào.

Sửa tiêu đề khi cuộn trang

Để sửa tiêu đề, bạn sẽ phải tạo hai khối. Một là có thể căn giữa nắp. Và có một đứa trẻ trong đó, điều này sẽ được ghi lại. Hãy bắt đầu nào...

Như thế này html đơn giản kết cấu! Bây giờ hãy thêm phong cách!

#headerMain ( chiều rộng: 920px; chiều cao: 195px; lề: 0px tự động; z-index: 0; ) #header ( chiều rộng: 920px; chiều cao: 195px; nền: url(../img/bg-header.jpg) không -lặp lại; vị trí: cố định; chỉ số z: 9999;

Lúc này tiêu đề sẽ được cố định ở phía trên màn hình và không di chuyển khi cuộn.

Dựa theo yêu cầu của bạn tiêu đề cố định thành lập 256 kết quả

• Bài học này sẽ hướng dẫn bạn cách tạo một bảng có tiêu đề cố định, cũng như hiệu ứng đẹp lựa chọn tế bào.

  Tuân thủ: 7

• Thanh điều hướng cố định thường được tìm thấy trên nhiều tài nguyên khác nhau. Chức năng này khá dễ sao chép trong WordPress. Một thanh cố định sẽ giúp người đọc của bạn nhanh chóng chuyển đến phần thú vị từ bất kỳ đâu trên trang.

  Tuân thủ: 7

• Trong hướng dẫn hôm nay, chúng ta sẽ tạo một thanh điều hướng cố định cho một trang web hoặc blog.

  Trận đấu: 6

• Trong hướng dẫn hôm nay, chúng ta sẽ tạo một khối cố định trong suốt luôn hiển thị.

  Trận đấu: 6

• Bảng thông báo cố định là công cụ tuyệt vờiđể thu hút sự chú ý của người dùng, bất kể nó được đặt ở đâu trên trang web. Bảng này thực hiện xuất sắc công việc thông báo về một sự kiện, sản phẩm, tiền thưởng và các tin tức tốt lành khác. Có rất nhiều plugin dành cho WordPress rất dễ sử dụng và tùy chỉnh.

  Trận đấu: 6

• Ngày nay, độ phân giải màn hình thay đổi từ 320px (iPhone) đến 2560px ( màn hình lớn) hoặc thậm chí hơn thế nữa. Giờ đây người dùng sử dụng Internet không chỉ thông qua PC mà còn sử dụng thiêt bị di động chẳng hạn như iPad hoặc Playbook. Do đó, cách tiếp cận truyền thống với kích thước trang cố định không còn khả thi nữa. Thiết kế web phải có khả năng thích ứng với mọi thứ. Bố cục của các phần tử sẽ tự động điều chỉnh để phù hợp với độ phân giải của màn hình. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một thiết kế trên nhiều trình duyệt bằng cách làm việc với các truy vấn phương tiện HTML5 và CSS3.

  Tuân thủ: 4

• TRONG bài học này chúng tôi sẽ làm thanh điều hướng, vẫn giữ nguyên khi bạn cuộn qua nội dung trang. Và tất nhiên, chúng tôi sẽ sử dụng một số thủ thuật để cải thiện giao diện và chức năng.

  Tuân thủ: 4

• Khi khung trang web của bạn không có chiều rộng cố định tính bằng pixel mà được đặt ở dạng phần trăm, thì trong trường hợp này sẽ phát sinh vấn đề khi tạo tiêu đề trang web. Tôi nói về cách giải quyết những vấn đề này trong video hướng dẫn này.

Đôi khi cần phải sửa tiêu đề hoặc thanh bên (hoặc có thể cả hai) trên một trang web. Nghĩa là, cho dù khách truy cập của bạn có cuộn bao nhiêu thì nội dung vẫn sẽ di chuyển và phần tử cố định sẽ luôn giữ nguyên vị trí. Trên thực tế, việc này không có gì phức tạp và hôm nay tôi sẽ chỉ cho bạn một ví dụ về cách cố định vị trí của các phần tử.

Trước khi bắt đầu bài học của chúng ta, tôi muốn nói rằng bằng cách này, bạn không chỉ có thể sửa được tiêu đề hoặc thanh bên. Bạn cũng có thể tạo một vị trí cố định cho chân trang hoặc có thể bạn muốn tạo một loại nút nào đó ở đâu đó ở bên cạnh sẽ luôn hiển thị. Nói chung, tất cả phụ thuộc vào lý do tại sao bạn cần nó.

Trong bài học này, tôi sẽ hướng dẫn cách sửa tiêu đề và thanh bên (mặc dù thay cho thanh bên có thể có một số loại biểu ngữ hoặc biểu mẫu đăng ký chẳng hạn).

Vâng, hãy bắt đầu!

Sửa vị trí tiêu đề và sidebar trên trang web

1. Điều đầu tiên bạn cần làm là tạo một tệp html cho trang của chúng tôi. Ở đây tôi sẽ tạo ra một Cấu trúc đơn giản trang. Nó sẽ có một tiêu đề với ba tiêu đề được đặt trong thẻ tiêu đề; thanh bên có liên kết và chú thích được đặt trong thẻ qua một bên; bản thân các liên kết điều hướng sẽ được đặt trong thẻ điều hướng; nội dung trang trong thẻ bài báo và chân trang trong thẻ chân trang.

Như bạn có thể thấy, tôi sử dụng thẻ html5 trong ví dụ này. Điều này không quan trọng và nếu vì lý do nào đó bạn không muốn sử dụng chúng thì bạn có thể sử dụng thẻ một cách an toàn div, trong khi gán cho chúng những mã định danh thích hợp. Điều này sẽ không ảnh hưởng đến việc cố định các phần tử theo bất kỳ cách nào, tôi chỉ không quan tâm trong trường hợp này Sẽ thuận tiện hơn khi sử dụng html5.

Nếu bạn sử dụng thẻ div bằng mã định danh, thì đừng quên thực hiện các thay đổi thích hợp trong tệp biểu định kiểu (khi chúng ta tiếp cận nó). Ví dụ: nếu bạn sử dụng thay vì thẻ tiêu đề, nhãn div id=”tiêu đề”, thì trong biểu định kiểu bạn sẽ chỉ định các thuộc tính cho #header(…kiểu…), không dành cho tiêu đề(...kiểu...).

Tôi đặc biệt tạo ra nội dung nhiều đoạn văn hơn trên Lorem Ipsum (một tài nguyên để tạo văn bản) để sau đó chúng tôi có thể cuộn và kiểm tra việc cố định các phần tử của mình.

Vì vậy, đây là nội dung của tệp html có nhận xét:

Sửa các phần tử trên trang

Trang web có tiêu đề cố định

Chiếc mũ này sẽ luôn ở đây...

Cho dù bạn cuộn bao nhiêu!

Thanh bên của trang web của chúng tôi

Chú ý! Thanh bên này cũng sẽ được giữ nguyên... vì chúng tôi đã sửa nó

Ở đây tôi sẽ đặt cụ thể thêm nội dung, để bạn có thể cuộn!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sem nec nil ultricies dignissim quis a velit. Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam. Nam purus diam, sagittis volutpat vehicula ac, adipiscing ac urna. Aliquam rutrum dignissim accumsan. Donec pulvinar sem vitae dolor sodales lobortis eget in metus. Đình chỉ ac augue at mi lacinia commodo eget interdum diam. Praesent felis erat, mollis nec est quis, maleuada congue felis. Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. Quisque vehicula eros ngồi amet leo feugiat, trong rutrum diam vulputate. Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. Nulla vestibulum felis id bibendum accumsan.

Iaculis arcu in sollitudin pharetra. Không có gì dễ dàng. Proin diam neque, viverra pretium mauris sit amet, placerat viverra orci. Số nguyên suscipit congue odio, id egestas ipsum ultrices vel. Donec porttitor convallis adipiscing. Duis sollicitudin libero id sollicitudin mattis. Tiền đình pellentesque eros dui, in suscipit arcu elementum non. Số nguyên sagittis nec risus ac suscipit.

Aenean một nữ tu id nữ tu ornare varius. Donec volutpat nisi et metus pulvinar pelentesque. Etiam porta mauris nec consectetur sagittis. Nunc ligula risus, sollitudin và lacus eu, sodales vehicula quam. Suspendisse venenatis sapien sed rutrum laoreet. Sự đình chỉ dễ dàng có thể xảy ra và tăng cường sự dễ dàng của bệnh xơ cứng. Pellentesque tristique Tellus ac bibendum rutrum. Etiam nulla urna, molestie id bibendum sodales, rutrum nec sapien. Không có gì dễ dàng. Praesent ut enim erat. Phasellus ultrices leo id dui condimentum, et pharetra magna lacinia. Nulla ngồi amet sagittis tortor.

Vivamus id neque magna. Phasellus suscipit orci quis tortor accumsan, vitae vestibulum leo ultrices. Donec viverra lorem vel purus vestibulum suscipit. Sed congue erat tincidunt nibh ultrices tạm thời. Ở hac Hac Hac Hac Platea dictumst. Nam non pellentes dolor. Phasellus elementum lobortis orci và posuere. Ut eget felis accumsan, sollitudin ante quis, venenatis felis. Ut nec mi ornare, ultricies orci vel, pharetra odio. Mauris ultrices felis quis nulla ornare, volutpat facilisis libero molestie. Ut sodales pelentesque arcu. Bạn có thể giao dịch với tôi bằng cách tự mình làm điều đó. Ut laoreet massa risus, quis facilisis ligula ullamcorper at. Nullam nec velit in sem semper ornare.

Fusce a dictum leo, ut sagittis mi. Curabitur tempus elementum lobortis. Duis ultricies tincidunt enim, in porta turpis condimentum pellentesque. Nulla augue libero, accumsan nec imperdiet ut, hendrerit at erat. Ở hac Hac Hac Hac Platea dictumst. Đình chỉ ullamcorper venenatis est non pulvinar. Pellentesque nec placerat ưu tú. Maecenas ngồi amet mi enim. In ut velit nec leo sagittis vehicula nec a mi. Tạm dừng xe cộ, vitae dictum magna. Maecenas odio ante, luctus nec hendrerit et, pelentesque a mi. Tiền đình ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id gia vị eros. Nulla lobortis congue libero, eget tincidunt dolor venenatis in. Nunc ut auctor orci.

Tôi chưa sửa phần chân trang nhưng tôi nghĩ bạn đã hiểu cách thực hiện việc này!

2. Bạn có thể nhận thấy rằng tệp biểu định kiểu đã được bao gồm, tất cả những gì còn lại là tạo nó.

Vì vậy, chúng ta tạo một file css tên là “fix.css” (bạn có thể đặt tên khác nhưng đừng quên thay đổi nó trong thuộc tính href của thẻ liên kết kết nối file style sheet) và lưu nó vào cùng thư mục với tệp html- của chúng tôi.

Hãy mở tệp css, bây giờ hãy để nó trông như thế này trong trình duyệt.

Hãy đi vào phong cách và đặt mọi thứ vào đúng vị trí của nó.

Đầu tiên mình sẽ viết một quy tắc để tất cả các phần tử html5 của mình được hiển thị dưới dạng các phần tử khối (đây là giải pháp cho các trình duyệt cũ không hỗ trợ các phần tử này. Nếu bạn không sử dụng thẻ html5 thì bạn không cần phải viết đường thẳng này). Tôi cũng sẽ đặt quy tắc cho thẻ thân hình: Chúng tôi sẽ cung cấp cho nó chiều rộng, căn giữa, đường viền và màu nền.

bài viết, sang một bên, chân trang, tiêu đề, điều hướng (hiển thị: khối;) nội dung (chiều rộng: 980px; lề: 0 tự động; đường viền: 1px rắn #333; nền: #ffdfbf;)

Bây giờ trang sẽ trông như thế này.

Chúng ta đã căn giữa trang, bây giờ hãy chuyển sang kiểu của tiêu đề.

Để cố định tiêu đề của chúng ta, chúng ta cần đặt chiều cao, chiều rộng và viết vị trí: cố định. Trong trường hợp này, chúng ta cần có chiều rộng bằng chiều rộng của thẻ thân hình, tức là 980px và tôi lấy chiều cao bằng giá trị 300px.

Bây giờ hãy nói về tài sản chức vụ. Khi nào chức vụ giá trị đã cho đã sửa, thì phần tử sẽ được cố định tại một vị trí cụ thể trên trang. Ngoài ra với giá trị vị trí: cố định chúng ta có thể điều chỉnh vị trí của phần tử bằng các thuộc tính như trên, phải, dưới Và bên trái(nhưng trong trường hợp mũ chúng ta sẽ không cần cái này). Một phần tử có vị trí này được gắn với tọa độ của cửa sổ và giữ nguyên vị trí khi cuộn trang.

Tôi cũng sẽ cung cấp cho tiêu đề của chúng ta một màu sắc, một khung và căn chỉnh văn bản trong đó vào giữa.

Và tại thời điểm này, hãy tạo kiểu cho các tiêu đề trên trang của chúng ta và các thẻ đoạn văn. Không có gì đặc biệt ở đây - chúng ta sẽ chỉ đặt kiểu phông chữ, màu sắc và một số dấu thụt lề.

Thêm mã này vào tệp css của bạn:

tiêu đề(height:300px; width:980px; border-bottom:1px Solid #333; nền:#ECB035; text-align:center; vị trí:fixed;) tiêu đề h1,tiêu đề h2, tiêu đề h3, bài viết p, chân trang p, sang một bên p(font-family:Arial, Helvetica, sans-serif; color:#336;) tiêu đề h1(margin-top:0px; buffer-top:50px;)

Nếu chúng ta nhìn vào trang của chúng ta bây giờ, chúng ta sẽ thấy như sau.

3. Chiếc mũ đã được cố định. Bạn có thể cuộn xuống trang và đảm bảo nó không di chuyển.

Tuy nhiên, như bạn có thể đã nhận thấy, một số nội dung của chúng tôi đã di chuyển xuống dưới tiêu đề - lẽ ra phải như vậy, đây là một tính năng của định vị này. Chúng tôi sẽ sớm đặt mọi thứ vào đúng vị trí của nó.

Bây giờ, hãy bắt đầu tạo kiểu cho thanh bên mà chúng tôi cũng sẽ sửa.

Chúng ta cũng cần xác định độ rộng cho thanh bên, đặt vị trí cố định cho nó và ở đây chúng ta cũng sẽ sử dụng thuộc tính đứng đầu, vì chúng ta cần điều chỉnh vị trí của khối thanh bên và di chuyển nó xuống dưới tiêu đề (nếu không nó sẽ vẫn ở phía sau tiêu đề). Tôi đã lấy nó cho đứng đầu giá trị 330px (300px là chiều cao của tiêu đề của chúng tôi và + 30 pixel khác để tiêu đề và thanh bên không bị dính vào nhau).

Đây là cơ bản để định vị. Các kiểu còn lại thêm màu sắc, đường viền, phần đệm văn bản, kích thước văn bản, v.v.

Thêm mã này vào tệp biểu định kiểu của bạn.

sang một bên(vị trí:cố định; chiều rộng:200px; nền:#99C; top:330px; đường viền:1px nét đứt #333;) sang một bên h2(font-family:Arial, Helvetica, sans-serif; font-size:16px; phần đệm: 10px;) sang một bên p(padding-left:30px; font-size:14px; buffer-right:10px;) sang một bên li(list-style-type:none; font-family:Arial, Helvetica, sans-serif;) sang một bên a(trang trí văn bản:none; color:#FFF;)

Và đây là những gì chúng tôi nhận được.

4. Bạn có thể thấy rằng các phần tử đã được cố định, tuy nhiên, văn bản nội dung của chúng tôi nằm lặng lẽ bên dưới chúng, như thể chúng hoàn toàn không có ở đó.

Điều này rất dễ khắc phục vì chúng tôi biết chiều cao của tiêu đề và chiều rộng của thanh bên cũng như chiều rộng của trang. Chiều rộng trang là 980px, chiều rộng thanh bên là 200. Do đó, chúng ta có thể đặt chiều rộng của khối nội dung là 700px và thụt lề từ cạnh trái 230 px (30 px để khối nội dung không “dính” vào thanh bên ). Và biết rằng chiều cao của tiêu đề là 300px, chúng ta cũng có thể đặt thụt lề trên cùng thành 300px (ở đây chúng ta không lấy nhiều hơn, vì tiêu đề ở đầu bài viết đã tự động có thụt lề trên cùng).

Chúng ta cũng sẽ đặt các kiểu đơn giản cho phần chân trang (chỉ để xác định nó vẻ bề ngoài).

Thêm đoạn mã cuối cùng vào tệp biểu định kiểu của bạn và xem kết quả.

bài viết(width:700px; đệm-top:300px; đệm-trái:230px;) chân trang(text-align:center; width:980px; chiều cao:30px; nền:#ECB035; lề-top:30px;)

Bây giờ bạn có thể cuộn và cuộn, đồng thời tiêu đề và thanh bên của bạn sẽ luôn ở trước mắt bạn.

Tôi sẽ kết thúc ở đây. Như mọi khi, bạn có thể tìm các tệp nguồn trong Nguồn bài học và bạn có thể xem trang này trong trình duyệt của mình bằng cách nhấp vào nút “Demo” ở đầu bài học.

Tôi hy vọng bài học hữu ích cho bạn! Tôi mong muốn được thông tin phản hồi của bạn! Chia sẻ bài học với bạn bè bằng cách sử dụng các nút mạng xã hội(Tôi sẽ rất biết ơn).

Và cũng đăng ký để cập nhật blog nếu bạn chưa đăng ký. Nó sẽ còn thú vị hơn nữa.

Chúc các bạn may mắn, tâm trạng vui xuân và dự án thành công!

Anna Kotelnikova đã ở cùng bạn. Thấy bạn!

Tôi nghĩ nhiều người trong số các bạn đã nhận thấy rằng xu hướng hiện nay bao gồm ngày càng nhiều yếu tố thiết kế hấp dẫn vẫn hiển thị khi người dùng cuộn trang. Theo tôi, điều này rất thuận tiện, đặc biệt nếu đó là điều hướng trang web. Đây chính xác là ví dụ chúng ta sẽ làm ngày hôm nay. Chúng ta sẽ tìm hiểu cách tạo tiêu đề trang web hoạt hình bằng JQuery và CSS3 có hoạt ảnh.

Như thường lệ, điều này hóa ra được thực hiện với ít dòng mã nhất và rất đơn giản, đồng thời rất hiệu quả. Nào, bây giờ chúng ta hãy bắt đầu với bài học.

Nhưng trước tiên, tôi muốn gửi lời cảm ơn chân thành tới http://www.webdesignerdepot.com và bây giờ chúng ta hãy bắt đầu.

Ι

HTML

Mã HTML rất đơn giản, chúng ta chỉ cần đặt các thẻ cho , sau đó viết nội dung trang web giữa chúng:

Vì đây là ví dụ đơn giản nhất nên ở đây chúng tôi chỉ thêm văn bản vào giữa các thẻ h1 nhưng bạn cũng có thể sử dụng hình ảnh ở đó hoặc điều hướng trang web chẳng hạn.

mã jQuery

CSS là nhất cách tốt nhất hiện đang triển khai hoạt ảnh và chuyển tiếp. Vì vậy, chúng tôi sẽ sử dụng tối thiểu các tập lệnh và chỉ để xác định kích hoạt hoạt ảnh khi cuộn trang.

Khi giá trị vị trí cuộn trang lớn hơn 1 nghĩa là người dùng đã cuộn trang và bạn cần thêm lớp “sticky” vào thẻ tiêu đề trang web. Đây là cách tiêu đề trang web được kích hoạt và sửa chữa.

Và đây là mã của chính nó:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("dính");

Điều quan trọng cần lưu ý là việc sử dụng trong trong ví dụ này không phải là một ý tưởng hay, bởi vì nếu việc sử dụng tập lệnh bị vô hiệu hóa trong trình duyệt thì tiêu đề trang web sẽ được sửa và thế là xong.

CSS

Mã CSS sẽ bao gồm 2 phần. Mã đầu tiên sẽ chịu trách nhiệm về tiêu đề trang web tiêu chuẩn, ở vị trí mặc định. Đoạn mã thứ hai sẽ chịu trách nhiệm hiển thị tiêu đề khi người dùng cuộn trang. Hãy xem mã mặc định trông như thế nào:

Tiêu đề( vị trí: cố định; chiều rộng: 100%; căn chỉnh văn bản: giữa; cỡ chữ: 72px; chiều cao dòng: 108px; chiều cao: 108px; nền: #335C7D; màu: #fff; họ phông chữ: "PT Sans ", sans serif; )

Bây giờ nhất điểm thú vị: Khi người dùng cuộn xuống trang, lớp .sticky sẽ được áp dụng để chúng tôi có thể cung cấp khả năng hiển thị hoàn toàn đa dạng mà CSS có thể thực hiện. Chúng tôi cũng sẽ đặt một vị trí cố định để tiêu đề trang web của chúng tôi luôn hiển thị.

Với những điều này Quy tắc CSS, bên dưới, chúng tôi muốn giảm diện tích của tiêu đề khi cuộn, thay đổi màu sắc và tất nhiên là giảm phông chữ. Đây là mã:

Header.sticky ( cỡ chữ: 24px; chiều cao dòng: 48px; chiều cao: 48px; nền: #efc47D; căn chỉnh văn bản: trái; đệm-trái: 20px; )

Đây là ví dụ đơn giản nhất mà bạn nên hiểu bản chất của công việc. Tất cả phụ thuộc vào thiết kế trang web của bạn.

Chà, bây giờ hãy thêm một số hoạt ảnh vào quá trình chuyển đổi của chúng ta bằng cách sử dụng . Đây là mã:

Chuyển tiếp: tất cả 0,4 giây dễ dàng;

Ι

Phần kết luận

Tôi hy vọng rằng phương pháp này sẽ giải quyết được nhiều câu hỏi liên quan đến việc thực hiện điều hướng thuận tiện và đơn giản cho trang web. Bên cạnh đó việc thực hiện này rất đơn giản và rõ ràng.