如何使用JS和CSS制作浮动导航栏?

亚历克斯

向下滚动时,如何使下部导航栏保持在顶部?我的意思是我只想隐藏上导航栏?下导航栏应代替上导航栏。

我试图附加功能:

$('.navbar-lower').affix({
    offset: {top: 50}
});

但是我的代码不起作用。

这是我的尝试jsFiddlehttp : //jsfiddle.net/hw3gxhhf

我该如何解决?

聚苯乙烯

我也用 jquery.bootstrap-autohidingnavbar.min.js

$("div.navbar-fixed-top").autoHidingNavbar({
    "showOnBottom": false,
    "showOnUpscroll": false
});
丹戈尔

您始终可以侦听scroll事件,并检查scrollTop值。达到50像素阈值后,您可以更改边距最高值:

window.addEventListener('scroll', function(){
    if (document.body.scrollTop >= 50) {
        $('.navbar-lower').css('margin-top','0px');
    } else {
        $('.navbar-lower').css('margin-top','50px');
    }
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用html,css和js一起包含侧边栏和导航栏

来自分类Dev

如何制作纯CSS滑块的导航栏?

来自分类Dev

修复 CSS 导航栏按钮浮动和方向

来自分类Dev

如何使用CSS网格制作边栏和栏目?

来自分类Dev

在导航栏中使用浮动

来自分类Dev

如何使用CSS放置横幅和导航栏

来自分类Dev

CSS3:如何在没有 JS 的情况下制作动态下拉导航栏

来自分类Dev

CSS浮动在Bootstrap导航栏下方

来自分类Dev

如何制作粘性导航栏?

来自分类Dev

如何制作谷歌导航栏

来自分类Dev

如何使用3个导航栏上的徽标制作徽标?

来自分类Dev

如何使用 ReactNative 制作自定义导航栏?

来自分类Dev

如何创建没有浮动的导航栏?

来自分类Dev

Html 和 css 导航栏浮动元素需要在同一行

来自分类Dev

需要帮助在滚动条上制作粘性导航栏-在Node.js / Express中使用Jade和Stylus

来自分类Dev

如何使用js和CSS制作动画Blob按钮?

来自分类Dev

如何仅使用CSS和HTML将响应式导航栏菜单居中?

来自分类Dev

如何仅使用CSS和HTML将图像添加到固定的导航栏

来自分类Dev

导航栏 HTML 和 CSS

来自分类Dev

如何制作右导航栏图标?

来自分类Dev

如何制作动态的Vue导航栏?

来自分类Dev

如何制作水平滚动的导航栏?

来自分类Dev

如何使我的导航栏浮动并使用Bootstrap 4分隔列表

来自分类Dev

使用MaterialzeCss制作侧面导航栏?

来自分类Dev

如何用HTML和CSS格式化导航栏?

来自分类Dev

css:浮动的导航栏,在触摸顶部时会固定

来自分类Dev

使用html和CSS导航栏周围的边距问题

来自分类Dev

仅使用 CSS 和 html 的响应式导航栏

来自分类Dev

如何使用:使用CSS检查响应式导航栏

Related 相关文章

热门标签

归档