darthlaroque darthlaroque - 6 months ago 10
Javascript Question

How would I have a certain block of code ignored after a certain function fires with JS? For example

I have sort of a vague question that I hope somebody can help me with. Unfortunately, I don't have that much experience yet with JavaScript and am slowly learning it (painstakingly).

Anyways my issue is that I have a fixed menu bar that expands with a scroll toggle method. That same menu bar also has the feature that it hides when you scroll down and is visible again when you scroll back up (save screen space).

The issue here is that when the menu is expanded I don't want it to disappear anymore on scroll down.

Now I was thinking if there was someway to easily code something like [if you fire the function with the scroll toggle method > ignore the code that tells you to hide on scroll down.

I'm sure this is something really simple I just can't quite seem to figure it out.

Admittedly I did not write the code for the hide menu feature, but did make some slight changes to it based on the little things I'm learning with JS.

Thanks for any help!!



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>




Answer

Create a variable that stores the state of your menu and conditional statements to control what you want to do while its closed or open.

for example:

var menuState = "Hide";

if(menuState == "Hide") {
   function hide() { ... }
}

Here the solution:

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;
   }
}
Comments