Javascript 如何使导航栏在滚动时消失?
我想这样,当用户滚动时,较小视图中扩展的导航栏将消失。下面是它的样子: 当用户滚动时,我希望它崩溃 忽略损坏的图像,如何使导航栏消失?基本上,我现在切换导航栏的方式是使用“最大高度”和“过渡”。那么,当用户滚动时,我如何使其折叠导航栏,同时用户也可以再次单击它 HTML:Javascript 如何使导航栏在滚动时消失?,javascript,jquery,html,css,navbar,Javascript,Jquery,Html,Css,Navbar,我想这样,当用户滚动时,较小视图中扩展的导航栏将消失。下面是它的样子: 当用户滚动时,我希望它崩溃 忽略损坏的图像,如何使导航栏消失?基本上,我现在切换导航栏的方式是使用“最大高度”和“过渡”。那么,当用户滚动时,我如何使其折叠导航栏,同时用户也可以再次单击它 HTML: 将以下代码添加到javaScript中: 当你向下滚动时,它会逐渐消失。当用户向上滚动时,它会淡入 如果这不是你想要的,告诉我 编辑:根据海报请求,我已经更新了javaScript,这样无论你向上滚动到哪里,它都会淡入
将以下代码添加到javaScript中: 当你向下滚动时,它会逐渐消失。当用户向上滚动时,它会淡入 如果这不是你想要的,告诉我 编辑:根据海报请求,我已经更新了javaScript,这样无论你向上滚动到哪里,它都会淡入
var mywindow=$(窗口);
var mypos=mywindow.scrollTop();
var-up=false;
var newscroll;
mywindow.scroll(函数(){
newscroll=mywindow.scrollTop();
如果(newscroll>mypos&&!up){
$('.navigationBar').stop().fadeOut();
向上=!向上;
控制台日志(up);
}else if(newscroll
@导入url('https://fonts.googleapis.com/css?family=Asap');
@导入url('https://fonts.googleapis.com/css?family=Bitter|剂量| Fira+无| Nunito |氧气| |;
身体
{
背景色:#598392;
保证金:0;
填充:0;
字体系列:“苦”,“尽快”,无衬线;
}
梅纽康先生
{
填充:20px;
显示:无;
光标:指针;
转变:转变:0.5s;
}
.导航栏
{
背景色:#2E86AB;
宽度:100%;
溢出:隐藏;
位置:固定;
z指数:1;
}
标题
{
溢出:隐藏;
显示器:flex;
弯曲方向:立柱;
背景色:#F7C174;
填充顶部:100px;
对齐项目:居中;
}
.头名
{
字体大小:75px;
位置:相对位置;
顶部:-60px;
文本对齐:居中;
}
.上字幕
{
文本对齐:居中;
位置:相对位置;
顶部:-80px;
}
.导航栏李
{
填充:20px;
显示:内联;
列表样式类型:无;
字体大小:22px;
}
A.
{
颜色:#EFF6E0;
文字装饰:无;
}
a:悬停
{
颜色:#AEC3B0;
}
导航ul
{
填充:20px;
保证金:0;
过渡:最大高度1s;
}
.标题h1
{
填充:75px 0 20px;
}
.标题文章
{
填充:20px;
}
我
{
宽度:250px;
高度:250px;
边界半径:100%;
}
.技能
{
背景色:#FFEECF;
溢出:隐藏;
高度:自动;
填充底部:50px;
}
.技能图标
{
显示器:flex;
宽度:100%;
证明内容:周围的空间;
弯曲方向:行;
柔性包装:包装;
高度:自动;
}
.skill icons>img
{
填充:50px;
高度:128px;
宽度:128px;
}
.标题
{
字体大小:60px;
文本对齐:居中;
}
关于
{
溢出:隐藏;
背景色:#F7C174;
}
.关于文章
{
填充:50px;
}
.联系方式
{
背景色:#FFEECF
}
/*模态材料*/
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
.模态内容{
背景色:#fefe;
保证金:15%自动;/*15%从顶部和居中*/
填充:20px;
边框:1px实心#888;
宽度:80%;/*可能更多或更少,具体取决于屏幕大小*/
}
/*关闭按钮*/
.结束{
颜色:#aaa;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:黑色;
文字装饰:无;
光标:指针;
}
显示
{
显示:块;
}
@仅介质屏幕和(最大宽度:768px)
{
梅纽康先生
{
显示:块;
}
.导航栏李
{
显示:块;
填充:10px;
文本对齐:左对齐;
左边距:30px;
字体大小:16px;
}
导航ul
{
最大高度:0;
填充:0px;
}
显示
{
最大高度:250px;
}
隐藏
{
最大高度:0px;
}
.标题文章
{
填充:20px;
}
.skill icons>img
{
填充:20px;
身高:30%;
宽度:30%;
}
}
/*
@仅介质屏幕和(最小宽度:768px)
{
导航ul
{
显示:块!重要;
}
}
*/
学生-网络开发者-导师/教育家
技能
&时代;
这是一个模态分析
关于
对合作感兴趣还是只是想了解我更多?幸运的是,你有几种方法可以联系到我。
$('.menuIcon')。在('click',function()上{
$('nav ul').toggleClass('show');
});
$(函数(){
$(文档).on(“鼠标滚轮”,函数(){
$('nav ul').toggleClass('hide');
});
});
var modal=document.getElementById('modal');
var jBtn=document.getElementById('java');
var span=document.getElementsByClassName(“关闭”)[0];
jBtn.onclick=函数(){
modal.style.display=“块”;
}
span.onclick=函数()
{
modal.style.display=“无”;
}
window.onclick=函数(事件){
如果(event.target==模态){
modal.style.display=“无”;
}
}
将此代码添加到javaScript中:
当你向下滚动时,它会逐渐消失。当用户向上滚动时,它会淡入
如果这不是你想要的,告诉我
编辑:根据海报请求,我已经更新了javaScript,这样无论你向上滚动到哪里,它都会淡入
var mywindow=$(窗口);
var mypos=m
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li><a href = "#"><i class="fa fa-home"></i> Home</a></li>
<li><a href = "#"><i class="fa fa-star" aria-hidden="true"></i> Skills</li>
<li><a href = "#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li>
<li><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> About</a></li>
<li><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Services</a></li>
<li><a href = "#">Miscellaneous</a></li>
</ul>
</nav>
<section class = "title">
<img src = "me.jpg" class = "me">
<h1 class = "top-name"></h1>
<h2 class = "top-subtitle">Student - Web Developer - Tutor/Educator</h2>
</section>
<section class = "skills">
<h1 class = "head-title">Skills</h1>
<div class = "skill-icons">
<img src = "bigicons/java.png" id = "java">
<img src = "bigicons/c.png">
<img src = "bigicons/html.png">
<img src = "bigicons/js.png">
<img src = "bigicons/css.png">
<img src = "bigicons/git.png">
</div>
<div class = "modal" id = "modal">
<div class = "modal-content" id = "lol">
<span class="close">×</span>
<p>This is a Modal</p>
</div>
</div>
</section>
<section class = "about">
<h1 class = "head-title">About</h1>
<article class = "about-article">
</article>
</section>
<section class = "contact">
<article>
Interested in collaborating or just want to get to know me more? Lucky for you, there are several ways you can reach out to me.
</article>
<article>
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$(function() {
$(document).on("mousewheel", function() {
$('nav ul').toggleClass('hide');
});
});
var modal = document.getElementById('modal');
var jBtn = document.getElementById('java');
var span = document.getElementsByClassName("close")[0];
jBtn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function ()
{
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Asap');
@import url('https://fonts.googleapis.com/css?family=Bitter|Dosis|Fira+Sans|Nunito|Oxygen');
body
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Bitter', 'Asap', sans-serif;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
transition: transform: 0.5s;
}
.navigationBar
{
background-color: #2E86AB;
width:100%;
overflow:hidden;
position:fixed;
z-index: 1;
}
.title
{
overflow:hidden;
display: flex;
flex-direction: column;
background-color: #F7C174;
padding-top:100px;
align-items: center;
}
.top-name
{
font-size:75px;
position: relative;
top:-60px;
text-align: center;
}
.top-subtitle
{
text-align: center;
position: relative;
top:-80px;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
font-size: 22px;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
.title h1
{
padding: 75px 0 0 20px;
}
.title article
{
padding: 20px;
}
.me
{
width:250px;
height:250px;
border-radius: 100%;
}
.skills
{
background-color: #FFEECF;
overflow: hidden;
height:auto;
padding-bottom: 50px;
}
.skill-icons
{
display:flex;
width:100%;
justify-content:space-around;
flex-direction: row;
flex-wrap: wrap;
height: auto;
}
.skill-icons > img
{
padding: 50px;
height:128px;
width:128px;
}
.head-title
{
font-size: 60px;
text-align: center;
}
.about
{
overflow: hidden;
background-color: #F7C174;
}
.about-article
{
padding: 50px;
}
.contact
{
background-color: #FFEECF
}
/* Modal Stuff */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.show
{
display:block;
}
@media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar li
{
display:block;
padding: 10px;
text-align: left;
margin-left: 30px;
font-size: 16px;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 250px;
}
.hide
{
max-height: 0px;
}
.title article
{
padding: 20px;
}
.skill-icons > img
{
padding: 20px;
height:30%;
width:30%;
}
}
/*
@media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
*/