This small tips will guide you how to create Fixed Menu When Scrolling – Fixed Navigation Menu Bar and hide it when user scroll to top again. Some other name is CSS Sticky Header – Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3.
You can easy insert or embed this menu to any page or sites. Just follow step below.
Step 1: Create a menu, you can put this html menu anywhere on your site:

<nav id="bienthuy">
<ul>
<li><a href="#hoatrinhnu">Hoa Trinh Nữ</a></li>
<li><a href="#hoanovedem">Hoa nở về đêm</a></li>
<li><a href="#saulebong">Sầu Lẻ Bóng</a></li>
</ul>
</nav>

Step 2: Insert this CSS at the end of your css file (or any where you want):

#bienthuy ul,#bienthuy ul li{margin:0 auto;position:relative;padding:0}#bienthuy ul li ul,#bienthuy ul li:hover{background-color:#252525}#bienthuy,#bienthuy ul li a,#bienthuy ul li:hover ul{display:block}#bienthuy{width:100%;height:35px;background-color:rgba(0,0,0,.65);box-shadow:0 2px 2px rgba(0,0,0,.5);position:fixed;float:right;text-align:left;top:0;left:0;z-index:100000}#bienthuy ul{left:20%}#bienthuy ul li{list-style:none inside;width:auto;float:left;line-height:35px;color:#fff}#bienthuy ul li a{text-transform:uppercase;white-space:nowrap;padding:0 10px;color:#fff;text-align:center;font-size:14px;font-weight:700;text-decoration:none}#bienthuy ul li ul{position:absolute;width:auto;display:none;border-bottom:3px solid #0082bb;padding-left:5px}#bienthuy ul li ul li{display:block;padding:0;margin:0;float:none}

You can see Demo Fixed Navigation Menu Bar

Or demo on this page

Hoa Trinh Nữ

Qua một rừng hoang gió núi theo sang rũ bụi đường trên vai
Hái cây hoa dại lẻ loi bên đường gọi hoa trinh nữ
Hoa trinh nữ không nặn mà bằng nàng hồng kiêu sa
Hoa đâu dám khoe màu cùng một nàng cúc vàng tươi
Hoa không bán hương thơm như nàng dạ lý trong vườn

Nhưng hoa trinh nữ đẹp tựa chuyện tình hai chúng ta
Xưa thật là xưa nhớ mấy cho vừa nhớ mẹ kể đêm mưa
Có ông vua trẻ xuất binh qua rừng dẹp quân xâm lấn
Khi vua kéo quân về tình cờ gặp một gia nhân
Vua xao xuyến tâm hồn vời nàng về chốn hoàng cung

Truyền cho khắp nhân gian đem lụa là đến cho nàng
Trên ngôi cao chín tầng hoàng hậu đẹp hơn ánh sao
Tôi không phải là vua nên mộng ước thật bình thường
Như yêu một loài hoa trên vùng đá sỏi buồn phiền
Loài hoa không hương không sắc màu

Những loài hoa biết khép lá ngây thơ
Tôi không phải là vua nên nào biết đến xa hoa
Không ngọc ngà kiệu hoa không nệm gấm không cung son
Tôi chỉ là người lính phong trần
Thấy hoa nhớ người yêu rất xa

Nâng nhẹ một cây lá xếp trong tay lá ngủ thật mê say
Ngỡ đôi mi gầy khép đêm trăng đầy cài then cung ái
Tôi nghe thoáng qua hồn mình vừa thành một quân vương
Quân vương giữa hoa rừng lòng bàng hoàng nhớ người thương
Và mong ước mai sau khi tan giặc rước vua về
Cho gia nhân ngóng đợi chỉ một cành trinh nữ thôi

Hoa nở về đêm

Chuyện từ một đêm cuối nẻo một người tiễn một người đi
Đẹp tựa bài thơ nở giữa đêm sương nở tận tâm hồn
Chuyện một mình tôi chép dòng tâm tình tặng người chưa biết một lần
Vì giây phút ấy … tôi tình cờ hiểu rằng …
tình yêu đẹp nghìn đời là tình yêu khi đơn côi

Vào chuyện từ một đêm khoác bờ vai một mảnh áo dạ đường khuya
Bồi hồi người trai hướng nẻo đêm sâu, dấu tình yêu đầu
Vì còn tìm nhau lối về ngõ hẹp còn chờ in dấu chân anh
Niềm thương mến đó bây giờ và nghìn đời
Dù gió đùa dạt dào còn đẹp như khi quen nhau

Ai lớn lên không từng hẹn hò không từng yêu thương
Nhưng có mấy người tìm được một tình yêu ngát hương
Mến những người chưa quen
Một người ở lại đèn trăng gối mộng
Yêu ai anh băng sông dài cho đẹp lòng trai

Một người tìm vui mãi tận trời nào giá lạnh hồn đông
Một người chợt nghe gió giữa mênh mông rót vào trong lòng
Và một mình tôi chép dòng tâm tình tặng người chưa biết một lần
Vì trong phút ấy tôi tìm mình thì thầm giờ đã gặp được một nụ hoa nở về đêm

Sầu Lẻ Bóng

Người ơi khi cố quên là khi lòng nhớ thêm
Dòng đời là chuỗi tiếc nhớ
Mơ vui là lúc ngàn đắng cay … xé tâm hồn
Tàn đêm tôi khóc khi trời mưa buồn hắt hiu
Lòng mình thầm nhớ dĩ vãng
Đau thương từ lúc vừa bước chân
Vào đường yêu

Đêm ấy mưa rơi nhiều
Giọt mưa tan tác mưa mùa ngâu
Tiễn chân người đi
Buồn che đôi mắt thấm ướt khi biệt ly
Nghe tim mình giá buốt
Hồi còi xé nát không gian
Xót thương vô vàn
Nhìn theo bóng tàu dần khuất trong màn êm
Mùa thu thương nhớ bao lần đi về có đôi
Mà người còn vắng bóng mãi
Hay duyên nồng thắm ngày ấy nay … đã phai rồi
Từ lâu tôi biết câu thời gian là thuốc tiên
Đời việc gì đến sẽ đến
Những ai bạc bẽo mình vẫn không … đành lòng quên

4.6/5 - (7335 bình chọn)

2 thoughts on “Fixed Menu When Scrolling & Fixed Navigation Menu Bar

  1. Paul says:

    Hi bien! Thanks you just solve my problem. Been looking for this for hours and yet it’s only on your blog. God bless!

  2. Dinesh Verma says:

    This is exactly what I was looking for. Thanks for sharing.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *