Develop Reference

How do I handle keyboard navigation to bring elements outside the visible bounds into view in dropdown?

I have a <ul> with a bunch of <li> options.
I wrote the following function that gets called when the user navigates my dropdown using the arrow keys:
function scrollIntoViewIfNeeded(target, reverse = false) {
const offsetTop = target.offsetTop;
const scrollHeight = document.getElementById('autocomplete-container').scrollHeight;
if (offsetTop > scrollHeight) {
target.scrollIntoView(false);
}
}
This works fine when moving down (pressing the down arrow). However, I am struggling to get this working when moving up (pressing the up arrow).
I was messing around with a reverse check but I am stuck. Any idea how to handle scrolling back up?

My waypoint function has undefined behaviour when the user refreshes the page after scrolling past it

I have a navigation bar and I've set its position to change to fixed when the user scrolls down past it and vice versa when the user scrolls up past that point by using the following waypoint:
var $navbar = $('.navbar-default');
$navbar.waypoint(function(){
if ($('#navigation-bar').hasClass('navbar')){
$('#navigation-bar').toggleClass('navbar-fixed');
} else{
($('#navigation-bar').toggleClass('navbar'));
}
}, { offset: '28%' });
This ensures the navbar stays on the users screen only past a certain point. This works as intended most of the time, however the issue is if the user scrolls down past that waypoint and then refreshes the page the navbar will jump back to its original position, which then causes undefined behaviour if you scroll back up past it.
Is there a way to ensure everything that is on the screen remains at that exact same spot when the user refreshes?

You can use the window.scrollTo function when the page loads
//scrollTo(x, y)
window.scrollTo(0, 0);
//the rest of your code...
This will scroll to the top-left of the page everytime the page loads.
Edit:
The answer from this question may also work:
* {
overflow-anchor: none;
}

fixed header not getting right classes on scroll after closing fixed sidebar

I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.

Mouse leave event keeps firing in navigation menu

Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!