首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当我向下滚动Bootstrap 4时,导航栏上出现搜索栏

当我向下滚动Bootstrap 4时,导航栏上出现搜索栏
EN

Stack Overflow用户
提问于 2018-06-10 04:03:50
回答 1查看 698关注 0票数 1

我如何在导航栏中创建一个最初不可见的搜索栏,当我向下滚动时它会出现(如果可能,我想决定滚动后它出现的时间)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-10 10:35:35

如果您创建了包含搜索栏的引导导航,则为搜索栏指定一个类名(在我的示例中我选择了.searchbar ),然后添加此javscript和css。

<script>  
  $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            $(".searchbar").addClass("visible");
        } else {
            $(".searchbar").removeClass("visible");
        }
    });

</script>

.searchbar {
opacity: 0;
}
.visible {
opacity: 1;
}

这将使搜索栏最初不可见,然后向下滚动(500px)后,它将添加类.visible,使搜索栏可见。然后,如果你从顶部滚动回到500px以上,它将删除.visible类,搜索栏将再次不可见。

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

https://stackoverflow.com/questions/50778071

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档