I want to dynamically show or hide buttons based on the overflow of a navigation list. If the list height overflows, display the buttons; if not, hide them.
Using JQuery
// This code snippet did not work for me!
if($('#nav-list').prop('scrollHeight') < $('#nav-list').height()){
$('#updown-arrows').hide();
}else{
$('#updown-arrows').show();
}
HTML Structure
<div id="nav-list">
<!-- Wordpress navigation menu -->
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'menu_class' => 'list-unstyled components',
'menu_id' => 'sidebarnav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
);
?>
</div>
<!-- Buttons for scrolling up and down -->
<div id="updown-arrows">
<a id="up" href="#"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a>
<a id="down" href="#"><span class="glyphicon glyphicon-menu-down bounce" aria-hidden="true"></span></a>
</div>