Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 Smart Scroll did not resolve the problem.
Javascript
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).scroll(function() {
var scroll_top = $(window).scrollTop();
if(scroll_top > 1) { $(".smart-scroll").addClass("scrolled-up");} else {$(".smart-scroll").removeClass("scrolled-up");}
if(scroll_top < last_scroll_top) {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
else {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
last_scroll_top = scroll_top;
});
}
CSS
.smart-scroll{
position: fixed !important;
right: 0;
left: 0;
z-index: 1030!important;
transition: all 0.3s ease-in-out;
}
.scrolled-down{
transform:translateY(-100%) !important;
}
.scrolled-up{
transform:translateY(0) !important;
}
The template navbar uses custom Javascript for fixing it to the top instead of using fixed-top.
function loadWindowEvents() {
$(window)
.on("scroll", function() {
loadSkills();
});
$(window)
.on('scroll', function() {
if ($(window)
.scrollTop() >= 100) {
$('.menu-wrap')
.addClass('fixed');
} else {
$('.menu-wrap')
.removeClass('fixed');
}
});
}
Testing revealed a glitch within the original code itself, seeking assistance in resolving this issue specifically for iPhone Safari.
A Javascript solution shared by another user appears to work flawlessly. Assistance needed in integrating it into the existing code structure.
window.location.hash.startsWith("#nav") && (window.location.hash = "", a());
let c = 0;
window.addEventListener("scroll", () => {
const t = Math.abs(parseInt(document.documentElement.getBoundingClientRect().top));
if (t <= n + 1 || t <= i.getBoundingClientRect().top + 1) return e.classList.remove("is-scrolled"), e.classList.remove("is-pinned"), void e.classList.remove("is-transition-enabled");
t > n + 2 * e.offsetHeight && (e.classList.add("is-scrolled"), e.classList.contains("is-transition-enabled") || g(600).then(() => e.classList.add("is-transition-enabled"))), Math.abs(t - c) < 5 || (t < c ? e.classList.add("is-pinned") : e.classList.remove("is-pinned"), c = t)
}), t.addEventListener("click", async t => {
t.preventDefault(), e.classList.contains("is-open") ? h() : a()
});