我有一个模糊的问题，希望有人能帮助我。不幸的是，我对 JavaScript 还没有太多的经验，并且正在慢慢地学习它(煞费苦心)。
无论如何，我的问题是我有一个固定的菜单栏，可以通过滚动切换方法进行扩展。该菜单栏还具有以下功能:向下滚动时隐藏，向上滚动时再次可见(节省屏幕空间)。
这里的问题是，当菜单展开时，我不希望它在向下滚动时再消失。
现在我在想是否有某种方法可以轻松编写类似的代码[如果您使用滚动切换方法触发该函数>忽略告诉您在向下滚动时隐藏的代码。
我确信这真的很简单，我只是似乎不太明白。
诚然，我没有编写隐藏菜单功能的代码，但确实根据我在 JS 中学习的小东西对其做了一些细微的更改。
感谢您的帮助!!
jQuery(document).ready(function() {
jQuery(".toc").click(function() {
$(".table-holder").css("height", $(".sidebar ul").height());
jQuery(".sidebar ul").slideToggle({
progress: function() {
$(".table-holder").css("height", $(".sidebar ul").height());
}
});
});
});
//HIDE MENU .SIDEBAR WHEN SCROLLING A LITTLE DOWNWARDS (CAN WE IGNORE THIS WHEN ABOVE FIRES? IS THAT THE PRACTICAL METHOD)
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.sidebar').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('.sidebar').hide();
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('.sidebar').show();
}
}
lastScrollTop = st;
}body {
background-color: #ddd;
height: 1000px
}
li {
list-style: none;
text-align: center;
background-color: orange;
}
.sidebar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: orange;
z-index: 1;
}
.sidebar ul {
display: none;
}
.table-holder {
height: 40px;
}
.wrapper {
position: relative;
top: 70px;
}
.content {
margin: 30px auto;
width: 75%;
height: 300px;
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!--Side Bar-->
<div class="sidebar">
<!--Table of Contents-->
<div class="toc">
<p>Table of Contents</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!--Side Bar Close-->
<!--Table Holder Div to Push Content Down-->
<div class="table-holder"></div>
<!--Content Divs-->
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</body>最佳答案
创建一个变量来存储菜单的状态和条件语句，以控制在菜单关闭或打开时要执行的操作。
例如:
var menuState = "Hide";
if(menuState == "Hide") {
function hide() { ... }
}
解决方案如下:
https://jsfiddle.net/73z9p9uk/1/
var open = false;
jQuery(document).ready(function() {
jQuery(".toc").click(function() {
!open ? open = true : open = false;
$(".table-holder").css("height", $(".sidebar ul").height());
jQuery(".sidebar ul").slideToggle({
progress: function() {
$(".table-holder").css("height", $(".sidebar ul").height());
}
});
});
});
//HIDE MENU .SIDEBAR WHEN SCROLLING A LITTLE DOWNWARDS (CAN WE IGNORE THIS WHEN ABOVE FIRES? IS THAT THE PRACTICAL METHOD)
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.sidebar').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
if(!open) {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('.sidebar').hide();
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('.sidebar').show();
}
}
lastScrollTop = st;
}
}
关于javascript - 在用 JS 触发某个函数后，如何忽略某个代码块？例如，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37094462/