Develop Reference

How to hide menu for mobiles by default? Using Javascript

I have a website with side-bar menu. Menu is by default visible. If i click close-btn. Menu is hidden. That works
I would like make menu by default visible for desktops and by default hidden for mobiles.
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 250px;
height: 100vh;
position: fixed;
top: 0;
z-index: 50;
left: 0px;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
.side-bar.non-active {
left: -250px;
}
.side-bar.active {
left: 0px;
}
The window.innerWidth < 850 works but i'm not sure if there is something better. 850px i use for #media queries.
$(document).ready(function () {
//jquery for toggle sub menus
$(".sub-btn").click(function () {
$(this).next(".sub-menu").slideToggle();
$(this).find(".dropdown").toggleClass("rotate");
});
//jquery for expand and collapse the sidebar
if (window.innerWidth > 850) {
$(".close-btn").click(function () {
$(".side-bar").addClass("non-active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("non-active");
$(".menu-btn").css("visibility", "hidden");
});
}
else {
$(".side-bar").css("left", -250);
$(".close-btn").click(function () {
$(".side-bar").addClass("active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("active");
$(".menu-btn").css("visibility", "hidden");
});
}
});
The issue is propably in $(".side-bar").css("left", -250); because in the DOM i can see it as inline style and after click nothing happen. Only .menu-btn disappers.
Is there another way how to set "reverse" logic for mobiles please? Or maybe just easy fix this i hope little bug?
I tried set oposite style for left: -250px; to left:0; via following logic but without any positiv result..

Use this instead:
if (window.matchMedia('(max-width: 850)').matches) { ... }
else { ... }
This uses css media query in JavaScript without any frameworks.

Detect Distance Between Elements on Scroll

I am using jQuery to change a fixed div at the top of the screen top:0.
When the scroll gets to a certain point the class is changed and CSS is changed. Great.
However, I was looking for a better way. Since I am changing it when it reaches 30px away from the content block, doing what I did below doesn't work well since it is using a fixed height:
$(function(){
$(document).scroll(function() {
var x = $(this).scrollTop();
if(x > 2025) {
if($(window).width() > 950) {
$('.topFullWidthWhite').addClass('nonStick');
}
} else {
$('.topFullWidthWhite').removeClass('nonStick');
}
});
});
SO...
Is there a way of doing something more along the lines of...
if(x <= 20 from /* HTML ELEMENT */){
//DO WHATEVER HERE
}
If there is a way of doing this relative to other elements rather than document height that would be grand.
Thanks!

Try to make use of offset().top for that particular element after which you want to change the css
$(window).on("scroll", function() {
var two = $(".two").offset().top;
if ($(this).scrollTop() > two - 20) {
$(".two").addClass("reached");
} else {
$(".two").removeClass("reached");
}
})
body {
margin-bottom: 400px;
}
.one {
height: 150px;
background: green;
margin-bottom: 20px;
}
.two {
height: 100px;
background: blue;
}
.two.reached {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>

How to activate .insertBefore on screen width change?

I have this snippet which switches the position of the secondary wrapper above the primary wrapper if the screen width is below 767px. This works great however it only works on refresh. How do I get it to work automatically when the screen width is changed?
Thanks! Total novice here.
jQuery(document).ready(function(){
if(screen.width<=767){
jQuery('body.single #secondary').insertBefore('#primary');
}
});

It seems like you are using jquery so I would recommend the .resize() method.
https://api.jquery.com/resize/
This will fire whenever the window is resized. You can have it do whatever you need at that point.
$(window).resize(function(){
If (myWindow.width() >= windowThreshold){
//do all the things...
}
});

window.addEventListener('resize', function() {
// do something with screen width
});
or with jQuery:
$(window).on('resize', function() {
// do something with screen width
})

I recommend .resize() method because you are using JQuery. This method is called whenever the window is resized.
Now, you can add you code like this.
var windowThreshold = 767;
$(window).resize(function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
});
#primary {
background-color: red;
}
#secondary {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="primary">primary</div>
<div id="secondary">secondary</div>
You also can use .on("resize", function() {})
$(window).on('resize', function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I know this has an accepted answer, but just for the record, you could let CSS do the work by using media queries and flexbox as well.
body {
display: flex;
flex-flow: column wrap;
}
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
.box {
background: tomato;
order: 1;
}
.circle {
border-radius: 50px;
background: lightblue;
order: 2;
}
#media (max-width: 767px) {
.box {
order: 2;
}
}
<div class="circle"></div>
<div class="box"></div>

When scrolling to top of div hide another div

this is what I have so far:
$("#main").each(function() {this.scrollTop = this.scrollHeight;
if ($(this).scrollTop()>0)
{
$('#navigation').addClass("nav-hide");
}
else
{
$('#navigation').addClass("nav-normal");
}
});
So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. So you could read the div without the navigation bar over it. Any ideas? Thanks.
Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/

You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. Also you don't need to add more than one class you can just add the class and remove the class. So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this:
$(window).scroll(function() {
if ($(this).scrollTop() >= $('#main').offset().top) {
$('#navigation').addClass("nav-hide");
}else {
$('#navigation').removeClass("nav-hide");
}
});
And you will just add the nav-hide class and then remove it when scrolling back up.
Here is a fiddle of this working JSFiddle Demo
I assume this is what you are looking for if not let me know so I can edit my answer.

The $(window).scroll() method executes on scroll change of the window. You can use it to hide your #navigation id selector
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#navigation').fadeIn();
} else {
$('#navigation').fadeOut();
}
});​
JSFiddle here
See the jQuery documentation for .scroll() here

function scrollpos() {
if (window.scrollY<document.getElementById('header').clientHeight) {
document.getElementById('navigation').style.display = 'block';
} else {
document.getElementById('navigation').style.display = 'none';
}
}
#navigation {
width: 100%;
height: 50px;
background-color: #586e75;
position: fixed;
z-index: 1000;
transition: transform 200ms ease;
}
header,
section {
height: 100vh;
width: 100%;
position: static;
}
header {
background: #4f4244;
}
section {
background: #222222;
}
.nav-normal {
transform: translateY(0%);
}
.nav-hide {
transform: translateY(-100%);
}
<body onscroll="scrollpos()">
<div id="navigation"></div>
<header id="header"></header>
<section id="main"></section>
</body>
do u need something like this?#Steboney

how to animate navbar on window scroll

I'd like to ask if there is a way to use jQuery animate() method to animate horizontal navbar's top property on window scroll.
Here is code I use:
window.addEventListener("scroll", function() {
if (window.scrollY > 200) {
$('#navbar').css({top:"100px"});
}
else {
$('#navbar').css({top:"0px"});
}
},false);
CSS:
#navbar{
top:0;
position:fixed;
transition: top 0.5s;
}
When you scroll down 200px the navbar changes its top position from 0 to 100px;
This works fine, but if I change methods and put .animate instead of .css,
$('#navbar').animate({top:"100px"});
it stops working. Any ideas why?

You can do this with css transition and how you can achieve this is with jQuery addClass instead of css()
DEMO
$(window).on('scroll', function () {
if ($(this).scrollTop() > 200) {
if (!$('.navbar').hasClass('expand')) {
$('.navbar').addClass('expand');
}
} else {
if ($('.navbar').hasClass('expand')) {
$('.navbar').removeClass('expand');
}
}
});
.navbar {
top: 0;
position: fixed;
transition: top 0.5s;
}
.navbar.expand {
top: 100px;
}

Scroll event listener execute every time when you scroll page on every pixel, and animate starts from begin. This gives unexpected results.
http://jsfiddle.net/29tkxawy/
You should be leave as is (with .css()).
Or like this without css transition:
http://jsfiddle.net/29tkxawy/10/