[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/tool/ - Tools & Resources

Software reviews, plugins & productivity tools
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1780209230864.jpg (159.79 KB, 1280x1280, img_1780209222594_uih9iwqw.jpg)ImgOps Exif Google Yandex

8d767 No.1717

if youre using bootstrap and want a smooth scrolling navbar that sticks to top when scrolled past, check this out. its super simple but often overlooked!
$(window).on("scroll", function() {if ($(this).scrollTop()) { //check scroll position$(".navbar").addClass('sticky');} else{$('.nav').removeClass('.stickey');}});

just add a sticky class to ur navbar and style it w/ css for the fixed state. this snippet ensures nav stays on top but doesnt mess up other elements' positions.
> note: make sure you have jQuery included in project or use vanilla js equivalent

8d767 No.1718

File: 1780210514000.jpg (120.28 KB, 1880x991, img_1780210498733_rhtea851.jpg)ImgOps Exif Google Yandex

>>1717
ive had this issue before when working on a project that needed a sticky navbar for mobile views but didnt want to mess up other elements' positions too much like overlapping footer. ended up tweaking OP's snippet and adding media queries so it only activates at smaller screen sizes. worked like charm!



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">