文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 4智能卷轴

问Bootstrap 4智能卷轴
EN

Stack Overflow用户

提问于 2020-05-13 03:49:47

回答 2查看 562关注 0票数 1

我正在使用this basic tutorial在滚动上显示/隐藏一个标准的BS4导航栏，它在桌面上工作得很好。

然而，在移动设备上，导航栏在向下滚动，然后返回顶部时表现得有点奇怪。返回顶部后，导航栏将再次隐藏。

我怀疑这个问题与scrollTop()有关，但似乎无法解决这个问题。

这是我的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：

.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);}

我也尝试了合并this stackoverflow，但仍然无法使其正常工作。

有什么想法可以让它在手机上运行吗？

javascript

jquery

css

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-13 04:45:12

在我的实践中也有类似的东西。从那里获取代码并根据您的情况进行调整。

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;}

票数 1

Stack Overflow用户

发布于 2021-02-20 04:51:05

我在if/else语句下面添加了这个，以防止隐藏在最上面

if(scroll_top <= 0) {
   $('.headerContainer').removeClass('scrolled-up').removeClass('scrolled-down');
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61760693

复制

相似问题

问Bootstrap 4智能卷轴
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4智能卷轴EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4智能卷轴
EN