We Keep Coding

Navbar hide on scroll down, shows on scroll up but keep mobile full page menu

I have a navbar that hides when I scroll down and shows up when I scroll up. That works fine.
But on smaller screens I have a full width menu that expands with a hamburger toggle and when I scroll even then hides. Is there a solution to fix that?
I also wonder if the navbar always could be visible when it's on top of the page.
Thanks on behalf.
My website
// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top < last_scroll_top) {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
else {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
last_scroll_top = scroll_top;
});
}

Found the solution:
// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
var last_scroll_top = 0;
$(window).on('scroll', function() {
scroll_top = $(this).scrollTop();
if(scroll_top > last_scroll_top && last_scroll_top > 40) {
$('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
}
else {
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
}
last_scroll_top = scroll_top;
});
}
$(document).ready(function(){
$(".navbar").on('shown.bs.collapse', function(){
$('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-no');
});
$(".navbar").on('hidden.bs.collapse', function(){
$('.smart-scroll').removeClass('scrolled-no').addClass('scrolled-down');
});
});

Execute code after scrolling a certain amount of pixels from a certain point (up or down)

I'm currently making an overlay that covers a sticky top bar when the user has scrolled beyond a certain point (down) and disappears when scrolling back up. However, I'd like to be able to scroll for at least 50px before the code is executed (something like a gap before the overlay is triggered).
$(function() {
var prevScroll = $(document).scrollTop(); //initial position
$(window).scroll(function() {
var newScroll = $(document).scrollTop(); //position from top after scrolling
if(newScroll > prevScroll) { // checks if the user has scrolled up or down
var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount
if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
$("#stick-start").fadeIn("fast");
prevScroll = newScroll + 50; //initial position + scrolled amount
};
} else {
var fromNew = $(document).scrollTop();
if (fromNew > newScroll - 50) {
if ($("#stick-start").hasClass("is-stuck")) {
$("#stick-start").fadeOut("fast");
prevScroll = newScroll - 50;
};
};
};
});
});
The condition that checks whether you're scrolling up or down works. But as it is now, the overlay just keeps fading in and out repeatedly. How do I make it so that you have to scroll at least 50px before anything happens ?

I think this should get you where you're going.
var $document = $(document);
$(window).scroll(function() {
if ($document.scrollTop() >= 50) {
$("#stick-start").fadeIn("fast");
} else {
$("#stick-start").fadeOut("fast");
}
});
EDIT: had an error, should be good now.

$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$("#stick-start").fadeIn();
} else {
$("#stick-start").fadeOut();
}
});

Class not always applied when user is at top of the page

I am using the following code to apply different classes to #nav depending if the user scrolls UP, DOWN, or is at the top of the page.
.nav-down applied when user scrolls up
.nav-up applied when user scrolls down
.nav-down-top when user scrolls to the top of the page
code
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight(true);
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 100);
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop) {
// Scroll Down
$('#s-nav').removeClass('nav-down').removeClass('nav-down-top').addClass('nav-up');
} else {
// Scroll Up (# top of screen)
if (st === 0) {
$('#s-nav').removeClass('nav-up').removeClass('nav-down').addClass('nav-down-top');
} else { //if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').removeClass('nav-down-top').addClass('nav-down');
}
}
}
lastScrollTop = st;
}
});
The problem is that when the user is at the top of the page or scrolls to the top .nav-down-top doesn't always get applied. This often happens when the user doesn't scroll very far to get to the top. I'm not sure how to ensure that .nav-down-top is applied when the user is at the top of the page.

$(function(){
var shrinkHeader = 300;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.navbar-fixed').addClass('class');
}
else {
$('.navbar-fixed').removeClass('oneclass');
$('.navbar-fixed').addClass('otherclass');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
Try this script cleaner and tell me if it worked

What you seem to want is this:
var el = $('#test1')
$(window).scroll(function(){
if($(window).scrollTop() > 50){
console.log("addClass")
$(el).addClass('slideUp');
} else {
console.log("removeClass")
$(el).removeClass('slideUp');
}
})
https://jsfiddle.net/m0nz41ep/1/
You do not need to set an interval for the window to check the information, since the scroll is already an event that checks the window whenever you input information. :)
Also, are you doing animations?
You need to tell the CSS file that the divs you want to manipulate will be animated.
-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s;
If it's just one div add it to the id for the div, if it's multiple, add it to a class and add the class to all of the divs. The rest of the code should do the magic!

fadein only if I'm scrolling down

I'm using this snippet to make an element fade out if scrolltop is > 750 and fade in when it's < 750. It works fine but I'd like it to remain not visible when scrolling back up (after it faded out) until user reaches the top of the page.
So, this is what's currently happening:
element is visible by default, user scrolls 750 and it fades out. User reaches end of the page, scrolls back up and when reaches 750 the element fades back in.
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if( scrollTop < 750 || scrollTop == availableScroll) {
$freccia.fadeIn("slow", function() {
});
} else {
$freccia.fadeOut("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);
What should be changed is:
element is visible by default, user scrolls 750 and it fades out. User reaches end of the page, scrolls back up and when reaches top of the page the element fades back in.
I tried with this but it's not working (doesn't fade in/out anymore):
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if ( scrollTop > 750 || scrollTop == availableScroll) {
$freccia.fadeout("slow", function() {
});
}
if ( scrollTop < 1 || scrollTop == availableScroll) {
$freccia.fadein("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);

Your second code snippet works fine, you've just used fadein and fadeout instead of fadeIn and fadeOut, a common mistake!
This code is working fine for me:
JSFiddle
var $window = $(window);
var $freccia = $('#freccia1');
function showHideFreccia() {
var availableScroll = $(document).height() - $window.height(),
scrollTop = $window.scrollTop();
if ( scrollTop > 750 || scrollTop == availableScroll) {
$freccia.fadeOut("slow", function() {
});
}
if ( scrollTop < 1 || scrollTop == availableScroll) {
$freccia.fadeIn("slow", function() {
});
}
}
showHideFreccia();
$window.scroll(showHideFreccia);
EDIT:
Unsure if this is what you want to happen or not, but this current code will show the element again when you reach the end of the page. You can fix this just by removing the || scrollTop == availableScroll from your second if statement (if it's not needed at all, it can be removed from the first also).

You can use this script, to apply in your scroll top:
var detectScroll = function (_event) {
var event = window.event || _event; // old IE support
var direction = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
return direction;
};
function showHideFreccia(e) {
var dir = detectScroll(e);
//...
if ( dir == 1 || scrollTop == availableScroll) {
// your action
}
}
// and into your scroll event
$window.scroll(function(e) {
showHideFreccia(e);
});
Source
If it will return 1 it means, that you scroll up then execute your fadein action. -1 me means scroll to bottom

Reverse fixed menu animation

The menu is currently set up so that when you open a page it is visible at the bottom of the page. As you scroll up the black menu panel will disappear out of view then reappear with the logo from the top.
Is there a way to reverse it so that once you scroll back up the black menu will disappear and reappear at the bottom of the page?
see website by clicking here
var distance = $('#content-div').offset().top,
$window = $(window);
var didscroll=true;
$window.scroll(function() {
if(didscroll==true){
if ( $window.scrollTop() >= distance ) {
didscroll = false;
//alert("r");
// Your div has reached the top
jQuery('.header').css({"position":"fixed","top":'-100px',"left":0});
jQuery('a.logo').css("visibility","visible");
jQuery( ".header" ).slideDown( 5000, function() {
jQuery(this).css({"top":0});
});
}
}
});
});

Remove the inline styles when you reached the breakpoint. Like this
if ( $window.scrollTop() >= distance ) {
$(".header").attr({style : ""});
$("a.logo").attr({style : ""});
}

Try this one..
var oritop = -100;
$(window).scroll(function() { //on scroll,
var scrollt = window.scrollY; //get the amount of scrolling
var elm = $(".box"); //get the box we want to make sticky
if(oritop < 0) {
oritop= elm.offset().top; //cache the original top offset
}
if(scrollt >= oritop) { //if you scrolled past it,
//make it sticky or else
}
else { //otherwise
//Do what you want to
}
});