gpt4 book ai didi

html - 粘性导航栏显示在所有 View 中

转载 作者:行者123 更新时间:2023-11-28 00:09:32 25 4
gpt4 key购买 nike

如何使用 uikit 使响应式粘性导航栏在桌面上工作
这是我试过的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar" style="background-color: rgba(0,0,0,.4)">
<nav class="uk-navbar-container uk-navbar-transparent uk-height-match" uk-navbar style="position: relative; z-index: 980;height: 77px;">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</nav>
</div>

导航栏适用于所有显示 View ,但我不希望它适用于平板电脑和移动设备 View
我怎样才能做到这一点?

最佳答案

你可以为窗口调整大小做一个监听器,当窗口宽度为移动尺寸时,隐藏你的导航栏,我在你的父组件中这样做过一次:

data: function() {
return {
windowWidth: 0,
}
},
mounted() {
this.$nextTick(function() {
window.addEventListener('resize', this.getWindowWidth);
//Init
this.getWindowWidth()
})
},
methods: {
getWindowWidth(event) {
this.windowWidth = document.documentElement.clientWidth;
},
},
beforeDestroy() {
window.removeEventListener('resize', this.getWindowWidth);
}

例如在您的模板中(伪代码):

<template>
<navbar v-if="windowWidth > 800px"></navbar>
</template>

希望对你有帮助

关于html - 粘性导航栏显示在所有 View 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55474523/

25 4 0