Bootstrap 4 Smart Scroll [英] Bootstrap 4 Smart Scroll

问题描述

我正在使用此基本教程来显示/隐藏标准滚动显示BS4导航栏，非常适用于台式机.

I'm using this basic tutorial to show/hide a standard BS4 navbar on scroll, and it works great for desktop.

但是，在移动设备上，向下滚动然后返回顶部时，导航栏的行为有些奇怪.回到顶部后，导航栏将再次隐藏.

However, on mobile the navbar is acting a little strange when scrolling down, then going back to the top. Once back to the top, the navbar hides again.

我怀疑问题与 scrollTop()有关，但似乎无法解决此问题.

I suspect the issue has something to do with scrollTop() but can't seem to troubleshoot this one.

这是我的JS:

    if ($('.smart-scroll').length > 0) { // check if element exists
        var last_scroll_top = 0;
        $(window).on('scroll', function() {
            var scroll_top = $(this).scrollTop();
            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;
            /* Tried to catch for scroll_top zero, but doesn't help */
            if(scroll_top == 0) $('.smart-scroll').removeClass('scrolled-up');

        });
    }

而且，这是我的CSS:

And, here's my CSS:

.smart-scroll {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}
.scrolled-down {transform:translateY(-100%);}
.scrolled-up {transform:translateY(0);} 

我还尝试合并此 stackoverflow，但仍然无法获取工作.

I also tried incorporating this stackoverflow and still couldn't get it working.

有什么想法可以在移动设备上运行吗?

Any ideas to get this operational on mobile?

推荐答案

我的做法也有类似之处.从那里获取代码并适应您的情况.

Had something similar in my practices. Took code from there and adapted to your case.

if ($('.smart-scroll').length > 0) {

        var lastScrollTop = 0;
        $(window).scroll(function() {    

            var scroll_top = $(window).scrollTop();

            if (scroll_top > 1) { // think, this will work a little bit better to catch scrolltop more then 0(1)
                $(".smart-scroll").addClass("stick");
            } else { 
                $(".smart-scroll").removeClass("stick");
            }

            if (scroll_top > lastScrollTop){
                $(".smart-scroll").removeClass("scrolled-up");                      
            } else {
                $(".smart-scroll").addClass("scrolled-up");
            }                       
            lastScrollTop = st;

    });

}   

和CSS

.smart-scroll {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    transform:translateY(0);
}
.stick {transform:translateY(-100%);}
.scrolled-up {transform:translateY(0) !important;} 

这篇关于Bootstrap 4 Smart Scroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！