【发布时间】：2019-03-21 16:09:46
【问题描述】：
我进行了一些研究，但似乎无法准确找到我正在寻找的东西。我的目标是在我的 JS 应用程序底部有一个导航栏，当用户单击某个按钮时，它将启动一个动画，导航栏从应用程序底部移动到应用程序顶部。以下是我为说明我的意思所做的一些修改：
after user presses "profile" button, for example
不确定哪个 JS 库可以帮助我解决这个问题，或者是否有代码示例。这里的关键是我不希望它在单击的任何按钮上移动，只有某些按钮。例如，如果用户在上面的示例中单击“库”，我希望它保持在底部。
有人知道我是怎么做到的吗？
编辑：所以我这样做的原因是因为这是一个电子应用程序，我希望一些内容是本地的，而一些内容是远程的。这就是为什么当用户按下“库”时，我希望导航栏保持静止。但是，如果用户按下“配置文件”，它将移至顶部，“内容”窗口的行为类似于网络浏览器，因为它将在远程网络服务器上加载页面。我希望这会有所帮助。感谢您提供所有信息！
编辑 2：有点离题，但我得到了这个奇怪的填充，我不确定来自哪里：
编辑 3：
这是 HTML 和 CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS：
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
【问题讨论】：
-
人们帮助您的最佳方式是发布您尝试过的最少代码本身。 minimal reproducible example
-
所描述的用例根本不清楚..为什么您要在单击某些按钮时跨屏幕跳转导航栏。你想达到什么目的？还有@imvain2 所说的，
标签： javascript html css navbar