scrollnav | dependency free JavaScript plugin for auto generating | Frontend Framework library

I am trying to move fixed divs (each .container_fluid) into view based on the current div in view and on scroll direction. I am using javascript and jquery. For the most part it works when going in one direction (from start to end or end to start), but if I change directions on the mouse/trackpad, the scroll goes in the wrong direction for one scroll event before going in the intended direction in the next scroll event (if that makes sense).

For example, if you go down-down-up-up, it moves as if you went down-down-down-up I think it may be an error in how I've used the boolean states, but I'm not sure how to fix it.

The down scroll should bring the next div into view, and the up scroll should bring the previous div into view. Also, if you scroll back-to-back too quickly, the divs do not move for a while (how can I fix that? I have a debounce function set at 100ms).

jsfiddle here

Actually am trying to achieve a sticky nav when scrolled and i use the javascript if...else statement to add a class of .sticky to the #navbar if the onscroll is greater than the #navbar offsetTop, else remove the class of .sticky and i add position: fixed; and width: 100%; and top: 0; to the .sticky, and fortunately these add class of .sticky to #navbar if the scroll is greater than the #navbar offsetTop

MY PROBLEM IS :- When scroll is less than the #navbar offsetTop the .sticky class doesn't remove and the #navbar remain fixed when scroll back to the top, how do i fixed it that my navbar will be back to normal when scroll is less than #navbar offsetTop..

HTML

I have a simple menu and when i click the "li" items the page automatically scrolls to that section. What I want to do is close my "dropMenu-nav" after scrolling finishes. I searched asked questions but I couldn't make it work. Here is my HTML :

I'm building a SPA with a scroll navigation being populated with menu items based on section components.

In my Home.vue I'm importing the scrollNav and the sections like this:

I use 2 different scripts on a webpage - one pure JS, the other jQuery.

The JS script is used for toggling the hamburger menu in mobile view. hamb.onclick shows the menu when clicking on hamburger, menuL.onclick hides the menu when clicking on a menu item. The latter refuses to work when the jQuery script is active (it works when the jQuery script is commented out).

Video of the problem that is occurring (the animation in question is orange).

What is supposed to happen is that the search box will slide out from the right until it is full width, when the search icon is pressed. Eventually (when I code it) it will close again sliding back into the right side of the screen when the user unfocuses from the search box.

CODE: