• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Sticky Top Bar vbb 4.2.1

Admin

Well-Known Member
Staff member
Administrator
I have used the idea and some code from XiTCLUB
This can work in a more simple way and act in the general navbar too.

Template Navbar
*************
as line number 2 paste
<div id="stickyBar">

additional.css
***********
#stickyBar.stick {
position: fixed;
top: 0;
z-index: 10000;
width:1200px;
height:59px;
margin:0 auto;
background: #247FB2;
border-radius: 0 0 0.5em 0.5em;
display: block;
}

Width is set to the width you have on the side or 100% (my page is width:1200px;)
Set the height of the Navbar incl submenu (my page Navbar is height:59px;)
It is important to add the correct px

Template Headinclude
******************
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.above_body').offset().top +130;

if (window_top > div_top) {
$('#stickyBar').addClass('stick');
} else {
$('#stickyBar').removeClass('stick');
}
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>

To get it to work without notch set height down to the navbar (my page is .top +130; in this file in headinclude)
If you use another jquery version is also okay.
It is important to add the correct px

If you use Google Translate disappear the top of the navbar!!


You can see it in action here, but only with this style

http://www.corvetteworld.dk/forums/forum.php?styleid=7
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
Admin Awesome Sticky Top Bar by XiTCLUB Vbb tutorial 0
Admin Awesome Sticky Top Bar by XiTCLUB Vbb tutorial 0
Admin Hướng dẫn thay đổi màu chủ đề sticky xenforo 2.x - Sticky thread simple styling xenforo 2 Xenforo 0
Admin [ozzy47] Separate Sticky Threads Add-ons 0
Admin Tạo sticky banner với javascript cho web - banner quảng cáo Javascript/ajax 0
K Thay Đổi Font Và Màu Cho Sticky Vbb tutorial 0
Admin [Mod vbb4x] Separate Sticky and Normal Threads Add-ons 0
katy Android Thoại quốc tế Top 30 quốc gia - Đón cơn mưa quà tặng từ MobiFone Điện thoại di động 16
webnauan Top 10+ Truyện Tình Cảm hay gây thương nhớ đầy kịch tính 2023 Sách, truyện, tài liệu 0
N Brute XMLRPC 2.11 + top password list Tut, tool, mmo 0
huongbtph Top 4 công cụ kiểm tra lỗi website tốt nhất Wordpress 0
Admin [OzzModz] Move Banned Email Block To Top Xenforo 0
Admin [OzzModz] Move Ban IP Block To Top Xenforo 0
Admin Yilmaz - Back to Top vBulletin 5.x Add-ons 0
Admin [OzzModz] Add Pagination To Top Of Members List In ACP Xenforo 0
Admin [OzzModz] Add Pagination To Top Of Phrase List Xenforo 0
Admin [OzzModz] Add Pagination To Top Of Templates List Xenforo 0
Admin [PB] Top Reacted Posts Xenforo 0
D Share TOP 1 Dịch Vụ Mua Bán Nick Acc Tài Khoản Facebook Tut, tool, mmo 0
Admin vtLai VBB Back to Top Page SinhVienIT.Net Add-ons 0
T Top 10 ngôn ngữ phổ biến nhất trong Blockchain Tin tức CNTT 0
T Top 10 nền tảng công nghệ Blockchain cần nhớ Tin tức CNTT 0
T Công nghệ Blockchain: Top công ty Fintech năm 2019 Tin tức CNTT 0
C Top smartphone bán chạy mùa cuối năm 2018 Tin tức, giới thiệu về ĐTDĐ 0
T Top 2 kiểu dáng đẹp cho phái nữ thu đông Trò chuyện linh tinh 0
H TOP Nhạc Trẻ Việt Được Nghe Nhiều 2018 - Tuyển Tập Nhạc Buồn Tâm Trạng Hay Nhất 2018 Âm nhạc 0
H 1 PHÚT x KÉM DUYÊN x XIN ĐỪNG LẶNG IM - Nhạc Trẻ TOP HITS Hay Nhất 2018 Âm nhạc 0
H TOP 20 Nhạc V-POP Buồn Hay Nhất 2018 - Nhạc Trẻ Hay Nhất 2018 Âm nhạc 0
thambatuoc Top Nhạc Điện Tử Gây Nghiện Mới Nhất - Nhạc EDM Nghe Hoài Không Chán Âm nhạc 0
thambatuoc 99,99% Người Xem Đã nghiện, Còn Bạn? Top Nhạc Điện Tử Gây Nghiện Hay Nhất Âm nhạc 0
thambatuoc Nhạc EDM Nghe Là Nghiền - TOP Nhạc Điện Tử Ma Quái Gây Nghiện Hay Nhất Âm nhạc 0
thambatuoc Cẩn Thận, Không Nghiện Đấy! - Top Nhạc Điện Tử Gây Nghiện Hay Nhất Của Tobu Âm nhạc 0
thambatuoc Top 15 Bản Nhạc Điện Tử Gây Nghiện Hay Nhất Nghe Hoài Không Chán Âm nhạc 0
thambatuoc Nhạc Ma Quái Gây Nghiện - Top 11 Nhạc EDM Trên 100 Triệu View Xem Hoài Không Chán Âm nhạc 0
thambatuoc Top 13 Bài Hát Âu Mỹ Remix Triệu View - EDM Gây Nghiện Cực Mạnh Âm nhạc 0
thambatuoc Top Nightcore Bài Hát Âu Mỹ Triệu View Âm nhạc 0
thambatuoc Top 30 EDM Gây Nghiện - Những Bản EDM Trên 1 Triệu View Nghe Hoài Không Chán Âm nhạc 1
thambatuoc Tôi Đã Nghiện! Còn Bạn Thì Sao? Top 12 Bản Nhạc Điện Tử Gây Nghiện Hay Nhất Âm nhạc 0
thambatuoc Top 10 Cover ► Bài Hát Âu Mỹ Trên 1 Tỷ View Nghe Hoài Không Chán Âm nhạc 0
thambatuoc Top 10 ► Nhạc Game Hay Nhất 2017 - Bạn Đã Nghe Chưa? Âm nhạc 0
K Game pc Sro Hoàng Sơn Chuẩn bi open mời ace lữ khách vào bem đua top nhận tiền mặt Trò chơi 0
thambatuoc Album Best Of Itro | Top 10 Songs of Itro Âm nhạc 0
haopro Nonstop Top EDM hay nhất đầu năm 2016 - Nonstop Full Ảo Âm nhạc 1
T Chính Thức OpenBeta Free WapBuilder Blog S2Vn.Top Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
A Game pc [KiemTheMoiRa.Net]Chính Thức Trình Làng Siêu Phẩm 14 Phái Ngày 26/09.Tưng Bừng Đua Top Và Nhận Qùa T Trò chơi 3
S Thảo luận Thảo Open Hệ Thống Đua Top Wap Việt Thảo luận SEO 0
B Hướng dẫn 5 bước để SEO từ khóa lên top Google Thảo luận SEO 18
Tuzoro Cách để SEO từ khóa lên TOP Google tìm kiếm Thảo luận SEO 1
Admin Download School Cheater game Việt trong top 11 GDWC 2013 Android, iOS 0
L0ngHackit Share Một Số Chiến Thuật Seo Website Lên Top 10 Thảo luận SEO 3

Similar threads

New posts New threads New resources

Back
Top