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');
});
});

How to display a scrolled navbar when page refresh?

So I got this script :
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
});
});
It makes the navbar fixed on scroll and clone logo and reset it on top page.
But if I refresh page at the middle, navbar isn't displayed cause it displays only on scroll.
Is there a way to fix that please?
Thanks.

As evolutionxbox suggested you should move your code into a function and call it both on scroll and on load like this:
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
myScroller();
$(window).scroll(function() {
myScroller();
});
function myScroller(){
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
}
});

How to make the nav visible while you reaching the bottom of the site?

I don't know why but the nav should appear again when I reach the bottom of the site. How can I fix that?
Opposite works = every time you reach the top of the site, the nav appears. If you scroll down at the beginning = nav disappears + if you hover on the nav = it appears again and disappears by leaving it.
nav appears while at the top + disappears while scrolling 👍🏼
$(document).ready(function() {
$(window).on('scroll', function() {
$('.nav-visibility').css("opacity", $(window).scrollTop() > 0 ? "0" : "1")
})
})
nav show and hide while hovering 👍🏼
$('nav').mouseover(function() {
$('.nav-visibility').css("opacity", "1");
});
$('nav').mouseout(function() {
if ($(window).scrollTop() > 0) {
$('.nav-visibility').css("opacity", "0");
}
});
nav should appear while reaching the bottom / doesn't work?! 👎🏼
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.nav-visibility').css("opacity", "1");
}
});

Try this, I have added condition to detect top and bottom and shown navbar accordingly
$(document).ready(function() {
var navbar = $('.nav-visibility')
$(window).on('scroll', function() {
//Check for top and bottom
if($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
navbar.css("opacity", "1");
}else{
navbar.css("opacity", "0");
}
})
})
For mouseout
$('nav').mouseout(function() {
var navbar = $('.nav-visibility')
if($(window).scrollTop() + $(window).height() <= $(document).height() && window.scrollY > 0){
navbar.css("opacity", "0");
}
});

Scroll Event Method:
document.addEventListener('scroll', function(e) {
if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
// Do something!
// document.getElementById('foo').setAttribute("style", "display: none");
}
}, true);
Example:
document.addEventListener('scroll', function(e) {
if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
document.getElementById('foo').innerHTML = "Reached Bottom";
document.getElementById('foo').setAttribute("style", "height: 100px;");
}
}, true);
<div id="foo" style="height: 1800px">Scroll to Bottom</div>

Thank you again guys! The problem is fixed and it works like how I expected.
$(document).ready(function() {
var navbar = $('.nav-visibility')
$(window).on('scroll', function() {
//Check for top and bottom
if ($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
navbar.css("opacity", "1");
} else {
navbar.css("opacity", "0");
}
})
})
$('nav').mouseover(function() {
$('.nav-visibility').css("opacity", "1");
});
$('nav').mouseout(function() {
var navbar = $('.nav-visibility')
if ($(window).scrollTop() + $(window).height() < $(document).height() && window.scrollY > 0) {
navbar.css("opacity", "0");
} else if ($(window).scrollTop() + $(window).height() > $(document).height() && window.scrollY < 0) {
navbar.css("opacity", "1");
}
});

Auto scroll to top element, when scrolling

I have three sections home_bg,barman,galeria. I want, that after scroll to section who feel $(window).scrollTop() add class. When this scroll <= 0.5 * height feeling section, auto scroll to top feeling section.
Example: http://www.dishoom.com/
<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
/* scrollAnch = $("section.nomargin");*/
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>

Show div after scrolling 100px from the top of the page

I found this, but this does it 100px before the bottom of the page. I need it 100px from the top of the page. I know how to implement it, I've done other jquery animations, just not what needs to be in this one.
$(window).scroll(function(){
if($(window).scrollTop() + 100 > $(document).height() - $(window).height() ){
alert("at bottom");
}
});
And also, I need to know how to reverse this so the div disappears when the user scroll back up before the 100px.
This will be used for a navigation bar.
Edit2> This worked also:
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$("#div").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 100){
$("#div").fadeOut("fast");
}
});

Try this:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
// > 100px from top - show div
}
else {
// <= 100px from top - hide div
}
});

Try this:
var menu = $("nav");
$(window).scroll(function(){
//more then or equals to
if($(window).scrollTop() >= 100 ){
menu.show();
//less then 100px from top
} else {
menu.hide();
}
});

I would recommend to do this:
$("#divname").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#divname").fadeIn("slow");
}
else {
$("#divname").fadeOut("fast");
}
});
Now the div is already hidden when you visit your page.
Without this:
$("#divname").hide()
It would show and then perform a FadeOut. And that is not what you want.