We Keep Coding

Hide Menu After ScrollTop with JQuery/JS

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 :
<div class="dropMenu-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
And my JS code :
$(document).ready(function(){
let scrollNav = $('.scroll');
scrollNav.click(function(e){
e.preventDefault();
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
*$('.dropMenu-nav').animate({
opacity: 0;
}, 2000);*
});
$(window).scroll(function() {
let scrollBarLocation = $(this).scrollTop();
scrollLink.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollBarLocation){
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
});
})
});
Scrolling part works perfectly but i cant find a way to hide my menu after scrolling. I don't see any error on my console also and I don't know where I am doing wrong to be honest. I would appreciate any help, thanks in advance for all your help.

The trick is to do the menu collapsing logic in the complete callback of jQuery.animate:
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, {
duration: 1000,
complete: function() {
document.body.classList.remove('nav-is-open');
}
});

If you want to close the menu after scroll then you will want to evaluate that code after the scroll completes. See the complete parameter in the jQuery.animate docs.
$('html,body').animate({
scrollTop: scrollTop: $(this.hash).offset().top
}, 1000, function () {
$('body').removeClass('nav-is-open')
})

fadeOut on scroll at pixel height

i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});

I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo

Menu Open & Close on menu button - Jquery

I'm trying to create a slide out menu, that open an closes on the same a tag. I've put something together but, it runs through the whole animation instead of pausing after opening.
HTML
<header>
<nav>
<ul class="slide-menu">
<li class="menu-element">How tall?</li>
<li class="menu-element">Books</li>
<li class="menu-element">Journal</li>
<li class="menu-element">Contact</li>
</ul>
<a id="puller" href="#">Menu</a>
</nav>
</header>
Jquery
$(document).ready(function()
{
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '+=360px'
}, 500);
});
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '-=360px'
}, 500);
});
});
Can anyone help with this?

Using jQuery toggle is a good idea. You can also simply maintain the state of the menu as to slided out already or not and take action like this
$(document).ready(function(){
var slide = false;
$("#puller").click(function(){
if(slide){
$(".slide-menu").animate({marginLeft: '-=360x'}, 500);
slide = false;
}else{
$(".slide-menu").animate({marginLeft: '+=360px'}, 500);
slide = true
}
});
});

Use jQuery Toggle, like so. Simple.
$(document).ready(function() {
var menu = $('.slide-menu');
var speed = 500; // set animation speed
$('#puller').toggle(
function(){
menu.animate({
marginLeft: '+=360px'
}, speed);
},
function(){
menu.animate({
marginLeft: '-=360px'
}, speed);
}
);
)};

Menu and Submenu not behaving as expected when hovering erratically

I have a horizontal menu (set out as a list) and when you hover over one of the list items it animates a dropmenu which is a child of the list item.
This works fine if you move the cursor over the menu at a "normal" speed. The problem I have is the behaviour of the menu if you erratically move the cursor over the menu. It leaves previously hovered elements shown still and I have to hover over and out of the dropMenu until they all return to their initial state (height:0).
My jquery for the menu is below:
$('#templateNav > ul > li').bind({
mouseenter: function() {
$(this).find(".dropMenu").clearQueue().animate({
height: 250
}, 200);
},
mouseleave: function() {
$(this).find(".dropMenu").clearQueue().height(0);
}
});
And here's an example of my menu code:
<div id='templateNav'>
<ul>
<li>Menu 1<span class='dropMenu'>...</span></li>
<li>Menu 2<span class='dropMenu'>...</span></li>
<li>Menu 3<span class='dropMenu'>...</span></li>
</ul>
</div>
Any ideas?

See this http://jsbin.com/ukuqik/1
$('#templateNav > ul > li').bind({
mouseenter: function() {
$(this).find(".dropMenu").stop(true,true).animate({
height: 250
}, 200);
},
mouseleave: function() {
$(this).find(".dropMenu").stop(true,true).animate({
height: 0
}, 200);
}
});
And a little better : http://jsbin.com/ukuqik/6

Here is a solution:
Use a variable, and set it when the Animation is done.. Something like:
var isAnimating = false;
mouseenter: function() {
isAnimating = true; // Here we start
$(this).find(".dropMenu").clearQueue().animate({
height: 250
}, 200, function (){isAnimating=false}); // Now we are done with animation
},
mouseleave: function() {
if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0);
}
Or you may stop the animation when you Move mouse out using .stop().

How to make a scrollable div scroll on click and mouseover using jQuery

Using the markup below how would I get the "#content" div to scroll up or down when I click or hover over the "#scrollUp" or "#scrollDown" anchor tag. Scrolling should be smooth preferably. If clicked it should scroll a specific amount (for touch devices) if mouseover it can scroll until mouseout.
<style>
#content {
overflow:auto;
height: 50px; /*could be whatever*/
}
</style>
<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>
<div id="wrapper">
<div id="content">
<ul>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
<li>some content here</li>
</ul>
</div>
</div>

You can use jQuery's animate function to accomplish a smooth-scrolling effect on click or mouseover:
var step = 25;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
// Animates the scrollTop property by the specified
// step.
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
// Cancel scrolling continuously:
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=1px" : "+=1px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
// If we want to keep scrolling, call the scrollContent function again:
scrollContent(direction);
}
});
}
Working example: http://jsfiddle.net/andrewwhitaker/s5mgX/
(You'll have to disable the mouseover and mouseout events to see the effects of the click event handler properly)
How it works:
Uses the animate function mentioned above to scroll smoothly by a specified amount on click.
Uses a flag to enable continuous scrolling on when the link's mouseover event handler is called, and disable scrolling when the link's mouseout event handler.
When scrollContent is called, if the scrolling flag is still true after the animation is completed, animate again in the same direction. The callback function parameter of animate allows us to take an action after animation has completed.

Try using JavaScript instead of jQuery for this task. Google the function scrollBy() as in window.scrollBy()