So, I am trying to make navbar swap colors of text and background when scrolled, with the following code it seems that background part is working just fine and it switches to white and back to gray, but when I literally changed font color in the next line, it just doesn't work. All the links are grouped in a list with the id = "nav_links". What's the deal with this? Thanks in advance!
function myFunction() {
if (document.body.scrollTop >= 0) {
console.log(document.body.scrollTop);
nav.style.backgroundColor = "white";
document.getElementById('nav_links').style.color = 'rgb(25,25,25)';
if (document.body.scrollTop === 0) {
nav.style.backgroundColor = 'rgb(25,25,25)';
document.getElementById('nav_links').style.color = "white";
}
}
}
document.addEventListener("scroll", myFunction);
<header id="nav">
<img src="logo.png" alt="logo" id="logo">
<nav>
<ul id="nav_links">
<li>Lifestyle</li>
<li>Fashion</li>
<li>Beauty</li>
<li>Health</li>
</ul>
</nav>
Anchor elements tend to have special treatment when it comes to their default styling by the browser. So we need to be quite specific when selecting them for a color change.
This snippet changes what the JS does. Instead of setting the styles directly it sets nav to have/not have a class 'scrolled' depending on whether scrollTop/pageYoffset is greater than zero or not. (Because scrollTop can't go below zero there is no need for the extra test in the script).
The presence/absence of the scrolled class causes both the background color of #nav and the color of the anchor elements in the li elements to be set in different ways.
A couple of notes on this. It has been assumed that the element with the id of nav is the one in your script which has id nav. This may not matter in practice, but if this is not true and element nav is in fact the actual nav element then you could replace #nav by #nav nav for more specificity. It's also been assumed that you don't want the bullet point suddenly appearing on the list as the background turns to white but I've indicated in the snippet how you can go back to having that if that was intended.
const nav = document.querySelector('#nav');
function myFunction() {
// if (document.body.scrollTop > 0) { //if there is some scrolling
// I ran into some problems making a Stackoverflow snippet because of the introduction of !doctype html
// so I have used this cross-browser test from #ijavid answer at https://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
if (typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0) {
nav.classList.add('scrolled');
} else { // there isn't any scrolling
nav.classList.remove('scrolled');
}
}
document.addEventListener("scroll", myFunction);
body {
height: 200vh;
background-color: blue;
}
#nav {
background-color: rgb(25, 25, 25);
}
#nav.scrolled {
background-color: white;
}
#nav #nav_links li>a {
color: white;
}
#nav.scrolled #nav_links li>a {
color: rgb(25, 25, 25);
}
/* if you want the bullet points to show when the background goes white remove the next two settings */
#nav_links>li {
list-style: none;
}
/* this is put in because of a bug in Safari which would mar the accessibility of the list */
/* (Safari would ignore it) see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
#nav_links>li::before {
content: "\200B";
}
</style></head><body><!doctype html><html><head><style>body {
height: 200vh;
background-color: blue;
}
#nav {
background-color: rgb(25, 25, 25);
}
#nav.scrolled {
background-color: white;
}
#nav #nav_links li>a {
color: white;
}
#nav.scrolled #nav_links li>a {
color: rgb(25, 25, 25);
}
/* if you want the bullet points to show when the background goes white remove the next two settings */
#nav_links>li {
list-style: none;
}
/* this is put in because of a bug in Safari which would mar the accessibility of the list */
/* (Safari would ignore it) see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
#nav_links>li::before {
content: "\200B";
}
<header id="nav">
<img src="logo.png" alt="logo" id="logo">
<nav>
<ul id="nav_links">
<li>Lifestyle</li>
<li>Fashion</li>
<li>Beauty</li>
<li>Health</li>
</ul>
</nav>
</header>
Related
Sounds like a simple problem, but turns out to be quite challenging to solve. For some website I have contents that are only to be shown if a user hovers/focuses a link. The link however has a target itself.
If one of those links is clicked by a touch screen user the browser instantly goes to the href location. This means the hover contents are never visible!
This is why users which do not have a mouse (or another device to hover like a magic remote control) should see alternative content. But how can I detect this?
$(document).on('click','#my-menu-inner > ul > li > a',function(e) {
if(clientHasInputDeviceSupportingHover()) {
return true;
} else {
e.preventDefault();
$('#for-no-hover-visitors').html('');
$(this).clone().appendTo('#for-no-hover-visitors');
$(this).next().clone().appendTo('#for-no-hover-visitors');
}
});
function clientHasInputDeviceSupportingHover() {
// HOW CAN I DETECT THIS???
if($('#checkhover:checked').length > 0) {
return true;
}
return false;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
margin:20px;
}
#my-menu-inner > ul > li > a {
padding:20px;
border:1px solid black;
display:block;
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:calc(100% - 20px);
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li a:hover + div.sub, #my-menu-inner > ul > li a:focus + div.sub,
#my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Simulate for Client supporting hover: <input type="checkbox" id="checkhover" />
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
foo
<div class="sub">
<ul>
<li>mobile</li>
<li>users</li>
</ul>
</div>
</li>
<li>
bar
<div class="sub">
<ul>
<li>never</li>
<li>see me</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="for-no-hover-visitors"></div>
The problem is clientHasInputDeviceSupportingHover(). What is the most reliable way to find this out?
What we know so far
It is possible to detect a touch device:
What's the best way to detect a 'touch screen' device using JavaScript?
Mouse detection at least might work"onclick":
How to detect if a device has mouse support?
In general there are a lot of different possible input devices:
https://en.wikipedia.org/wiki/Input_device#Pointing_device
A generic / more reliable solution would be very welcome.
The W3C seems to have recognized this problem and has introduced the hover feature:
The hover media feature is used to query the user’s ability to hover
over elements on the page with the primary pointing device. If a
device has multiple pointing devices, the hover media feature must
reflect the characteristics of the “primary” pointing device, as
determined by the user agent. (To query the capabilities of any
available pointing devices, see the any-hover media feature.)
There is even a media query to check if there is any possibility to hover:
The any-pointer and any-hover media features are identical to the
pointer and hover media features, but they correspond to the union of
capabilities of all the pointing devices available to the user. In the
case of any-pointer, more than one of the values can match, if
different pointing devices have different characteristics.
Code samples:
/* Primary input mechanism system can
hover over elements with ease */
#media (hover: hover) { ... }
/* Primary input mechanism cannot hover
at all or cannot conveniently hover
(e.g., many mobile devices emulate hovering
when the user performs an inconvenient long tap),
or there is no primary pointing input mechanism */
#media (hover: none) { ... }
/* One or more available input mechanism(s)
can hover over elements with ease */
#media (any-hover: hover) { ... }
/* One or more available input mechanism(s) cannot
hover (or there are no pointing input mechanisms) */
#media (any-hover: none) { ... }
Official draft: https://drafts.csswg.org/mediaqueries/#hover
This feature is still at risk, but I really hope it will be fully supported soon as it is already widely supported: https://caniuse.com/#feat=css-media-interaction
Further read: https://css-tricks.com/touch-devices-not-judged-size/
For Chrome test your device here: https://googlechrome.github.io/samples/media-hover-pointer/
Test with JavaScript: https://jsfiddle.net/Blackbam/zkd2cs0t/16/
The best solution for now is most probably to use those media queries with a fallback solution using touch detection via document.createEvent("TouchEvent"); and mouse detection via mousemove.hasMouse.
One approach, if you're able to use up-to-date CSS (and check the compatibility table in the linked resources):
/* Here we use media queries to test the device's
support for the 'pointer' property, here we
check if the 'fine' property-value is supported
by the device: */
#media (pointer:fine) {
/* Here we set variables to use in styling
the subsequent content which will identify
the pointer support: */
:root {
--hasTouch: orangered;
}
}
#media (pointer:coarse) {
:root {
--hasTouch: limegreen;
}
}
#media (pointer:fine) and (pointer:coarse) {
:root {
--hasTouch: skyblue;
}
}
/* Note that we don't specify the variable
in the event of the device not supporting
the 'pointer' property or property-value;
therefore if the <div> is white (#fff) then
we're using the default value from the
var() function: */
div {
background-color: var(--hasTouch, #fff);
height: 5em;
border: 2px solid #000;
}
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#media (pointer:fine) {
:root {
--hasTouch: orangered;
}
}
#media (pointer:coarse) {
:root {
--hasTouch: limegreen;
}
}
#media (pointer:fine) and (pointer:coarse) {
:root {
--hasTouch: skyblue;
}
}
div {
background-color: var(--hasTouch, #fff);
height: 5em;
border: 2px solid #000;
}
ul {
width: 80vw;
margin: 0.5em auto;
list-style-type: none;
}
li::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
border-radius: 50%;
border: 2px solid #000;
}
.failure {
color: #000;
}
.orangered::before {
color: orangered;
}
.limegreen::before {
color: limegreen;
}
.skyblue::before {
color: skyblue;
}
<div></div>
<ul>
<li class="failure"> - Doesn't appear to understand <code>pointer</code>.</li>
<li class="orangered"> - Probably uses a mouse.</li>
<li class="limegreen"> - Probably uses touch</li>
<li class="skyblue"> - Could maybe have both mouse <em>and</em> touch.</li>
</ul>
JS Fiddle demo.
References:
#media.
#media (pointer) property.
CSS custom properties (--*).
Most designers seem to have the opposite problem, ie getting rid of annoying double taps to get to an element.
However you might try the below to solve the problem and save a lot of extra code or device detection;
$("*").on("touchend", function(e) { $(this).hover(); });
notes
you can replace * with specific classes or types
you can add events to touchend, like click or mouseover
only tested on iphone XR ois 12.1 and ipad ios 9.5, safari & chrome
I use latest Google Chrome and I have the following frontend code for a responsive navigation menu which I use in my WordPress website.
Clicking the .burger element makes adjacent .menu element to appear or disappear, in dropdown or dropup respectively.
My problem
We open a browser window <=959px and we open the mobile menu.
We resize the window to >=960px and then we resize back to <=959px.
We have to click the burger twice to close the menu, to then re-open it.
My question
Why do we need to click the burger twice in the given circumstances?
Code
document.addEventListener('DOMContentLoaded', ()=>{
let clicks = 0;
let menu = document.querySelector('#menu-primary');
let burger = document.querySelector('.burger');
let isMenuVisible = false;
burger.addEventListener('click', ()=>{
isMenuVisible = !isMenuVisible;
menu.style.display = isMenuVisible ? 'block' : 'none';
});
let mobileBehavior = ()=>{
menu.style.display = 'none';
};
if (window.innerWidth <= 959) {
mobileBehavior();
}
window.addEventListener('resize', ()=>{
if (window.innerWidth <= 959) {
clicks = 1;
} else if (window.innerWidth >= 960) {
menu.style.display = 'block';
}
});
});
.burger {
display: block;
text-align: center; color: var(--w);
margin-bottom: 0 !important;
font-weight: bold
}
#menu-primary { display: none }
#media screen and (min-width: 960px) {
.burger { display: none }
#menu-primary { display: block }
}
<div class="burger">BARS</div>
<ul id="menu-primary">
<li>Homepage</li>
<li>Contact_us</li>
</ul>
you are using too much javascript, you could simplify it by toggling a class on the element when you click the bar and put the 'logic' in css.
document.addEventListener('DOMContentLoaded', ()=>{
let menu = document.querySelector('#menu-primary');
let burger = document.querySelector('.burger');
burger.addEventListener('click', ()=>{
menu.classList.toggle('collapse');
});
});
.burger {
display: block;
text-align: center; color: var(--w);
margin-bottom: 0 !important;
font-weight: bold;
cursor: pointer;
}
#menu-primary.collapse{
display: none;
}
#media screen and (min-width: 960px) {
.burger { display: none }
#menu-primary.collapse{
display: block;
}
}
<div class="burger">BARS</div>
<ul id="menu-primary">
<li>Homepage</li>
<li>Contact_us</li>
</ul>
The problem is you're not closing the menu when the browser width is initially resized to <= 959. To do this efficiently, you just need a boolean variable to control the menu closing so it only happens one time at the breakpoint and then resets when the browser width is resized to >= 960.
document.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector('#menu-primary');
const burger = document.querySelector('.burger');
const breakpoint = 959;
let switched = false;
burger.addEventListener('click', () => {
menu.style.display = menu.style.display !== 'block' ? 'block' : 'none';
});
if (window.innerWidth <= breakpoint) {
menu.style.display = 'none';
switched = true;
}
window.addEventListener('resize', () => {
if (window.innerWidth <= breakpoint) {
if (!switched) {
switched = true;
menu.style.display = 'none';
}
} else {
if (switched) {
switched = false;
menu.style.display = 'block';
}
}
});
});
If you want to target a certain breakpoint and run some code when resize hits it, you can use window.matchMedia and it works with breakpoint range as well.
window.addEventListener("resize", function () {
// single breakpoint
if (window.matchMedia("(max-width:768px)").matches) {
// your logic here
}
// you can target breakpoint range as well
// window.matchMedia("(min-width:375px) and (max-width:768px)").matches
});
On a side note, you may need to throttle resize event if you're performing expensive dom operations.
If I understand the question, you are trying to accomplish the following:
Create a hamburger style drop down menu or navigation drawer that opens and closes on a click event.
Only show the hamburger and related menu on mobile screens.
If a mobile-sized screen is resized to a desktop size while the hamburger menu is open: a) the hamburger and related menu are both hidden, and b) the menu display is "reset" so that if the screen is resized back to a mobile size the hamburger is displayed but the related menu is not.
The other answers have addressed one or more of the above items but not all of them. Following is an approach to putting them all together; however, I would recommend against implementing "3b" above unless you have an unusual use case for your app or site (I don't think most casual users are resizing their screens from mobile to desktop and then back to mobile sizes very often, but maybe I am wrong, and I don't know that it would matter much if the drop down menu was still visible if someone did go through this sort of resizing experiment).
I have added some additional html and css for styling purposes because it was hard to visually see the effects of toggling the menu display and resizing the screen with a spartan setup (also handled the display of the menu with the visibility attribute and position: absolute so that it doesn't impact the positioning of other elements when the display is toggled.
The functional code for your specific purpose are the javascript and the css styles for the .burger, .burger-menu, .hidden, and .desktop classes (including the related media query).
const burger = document.querySelector('.burger');
const burgerMenu = document.querySelector('.burger-menu');
burger.addEventListener('click', () => {
burgerMenu.classList.toggle('hidden');
});
// not recommended (but this "resets" the menu display on resize)
window.addEventListener("resize", () => {
if (window.matchMedia('(min-width:960px)').matches) {
burgerMenu.classList.add('hidden');
}
});
nav {
background-color: #000;
color: #fff;
margin-bottom: 16px;
}
nav ul:first-child {
display: inline;
padding: 0;
}
nav ul li {
padding: 8px 16px;
}
.burger {
display: inline-block;
}
.burger div {
background-color: #fff;
margin: 4px 0;
width: 24px;
height: 3px;
}
.burger-menu {
background-color: #000;
padding: 4px;
position: absolute;
list-style: none;
}
.hidden {
visibility: hidden;
}
.desktop {
display: none;
}
#media screen and (min-width: 960px) {
.burger {
display: none;
}
.burger-menu {
visibility: hidden;
}
.desktop {
display: inline-block;
}
}
<nav>
<ul>
<li class="burger">
<div></div>
<div></div>
<div></div>
</li>
<ul class="burger-menu hidden">
<li>Home (mobile)</li>
<li>Contact (mobile)</li>
</ul>
<li class="desktop">Home (desktop)</li>
<li class="desktop">Contact (desktop)</li>
</ul>
</nav>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel augue ipsum. Donec suscipit nisi magna, ac condimentum est blandit a.
</div>
I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:
<div class="contributor">
Some great stuff here
</div>
Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
$(this).addClass('visible');
});
$('.contributor').mouseleave(function(){
$(this).removeClass('visible');
});
});
Here's the code for the 'visible' class:
.visible{
background-image: url('../res/dev-1.png');
}
Why do you use jQuery? use just CSS and pseudo-class :hover.
.contributor:hover{
background-image: url('../res/dev-1.png');
}
apply for diffrent div:
.contributor.diff-div:hover{
background-image: url('../res/dev-2.png');
}
If you can do something in the CSS, it is almost always it will be a better solution than using JavaScript
First, save the image url in an attribute named "imageurl" (which isn't parsed by the browser):
<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>
Then, use this jQuery code:
$('.contributor').mouseenter(function(){
var imgageUrl = $(this).attr("imageurl");
$(this).css("background-image" , imgageUrl);
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
Of course, you also have to build the HTML dynamically.
may be you can consider css function instead of addClass.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
if(this.id == "one")
$(this).css("background-image" , "url('../res/dev-1.png')");
else if(this.id == "two")
$(this).css("background-image" , "url('../res/dev-2.png')");
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
});
Try this with jquery. suppose you have six images from dev-1.png to dev-6.png then it will set them as bacground for div number 1 to 6 respectively
$(document).ready(function(){
$('.contributor').mouseover(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:url('../res/dev-"+index+".png');";
$("this").eq(index).attr('style',bI);
});
$('.contributor').mouseleave(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:none";
$("this").eq(index).attr('style',bI);
});
});
For reference (Too troublesome and Won't apply if you have a ton of elements)
This can be achieved with pure CSS.
images might take a second to load (random image services)
Working example: (not responsive open in full page)
.optionlist li {
background: #111;
color: #999;
padding: .5em;
list-style-type: none;
border: 1px solid;
max-width: 70px
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after {
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Start Background Control */
#red:after {
background: url(http://lorempixel.com/800/600/)
}
#blue:after {
background: url(http://lorempixel.com/800/601/)
}
#green:after {
background: url(http://lorempixel.com/801/600/)
}
#yellow:after {
background: url(http://lorempixel.com/801/601/)
}
#orange:after {
background: url(http://lorempixel.com/799/600/)
}
#white:after {
background: url(http://lorempixel.com/800/599/)
}
#black:after {
background: url(http://lorempixel.com/801/599/)
}
/* End Background Control */
<div class="optionlist">
<ul>
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</ul>
</div>
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
I have a drop down menu that sits inside a header that is set to position: fixed. When viewed on a mobile device, I want the header to remain fixed, but when the menu is activated, jQuery dynamically changes the header's position to relative. That works fine (see code below), but there are a few problems that I need to fix. If the menu-toggle link is clicked again (closing the menu), the header does not return to its previous state "relative". Is there a way to do this? I also notice a flicker, so let's say you scroll half way down the page, then click on the menu to open it, the page sort of jumps and does not scroll back to the top where the menu is located inside the header as it should. I would prefer a pure CSS solution, but that seems impossible. I COULD set the rules so that if it's less than 499 pixels wide, the header gets positions "relative", but then usability fails, as a user will have to scroll up to the top of the page to access the drop down menu.
Any help would be greatly appreciated.
Here is my code:
HTML
<header role="banner" class="secondary">
<em>Menu</em> <span aria-hidden="true"></span>
<nav id="nav" role="navigation">
<ul class="menu set">
<li class="subnav">
Link
<ul class="sub-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS
header[role="banner"] {
width: 100%;
background: #fff;
display: block;
margin: 0 auto;
padding: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
z-index: 10000;
}
#media all and (min-width: 500px) {
header[role="banner"] {
position: fixed;
top: 0;
left: 0;
clear: both;
height: auto;
display: block;
}
}
#media all and (max-width: 499px) {
header[role="banner"] {
position: fixed;
}
}
JAVASCRIPT
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#nav'),
$menulink = $('.menu-toggle'),
$menuTrigger = $('.subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
var add_toggle_links = function() {
if ($('.menu-toggle').is(":visible")){
if ($(".toggle-link").length > 0){
}
else{
$('.subnav > a').before('<span class="toggle-link">Open</span>');
$('.toggle-link').click(function(e) {
var $this = $(this);
$this.toggleClass('active').siblings('ul').toggleClass('active');
});
}
}
else{
$('.toggle-link').empty();
}
}
add_toggle_links();
$(window).bind("resize", add_toggle_links);
});
$(document).ready(function() {
$('.menu-toggle').click(function() {
if ($( document ).width() < 499)
$('header[role="banner"]').css('position', 'relative');
});
});
So you don't actually have any js code in there that will switch the position of your header between fixed and relative.
What I would do is maybe toggleClass on your header.
$(document).ready(function() {
$('.menu-toggle').click(function() {
if ($( document ).width() < 499){
$('header[role="banner"]').toggleClass('active');
}
});
});
Then in your css
header[role="banner"] {
position: fixed;
}
header[role="banner"].active {
position: relative;
}
The screen jump you're getting is probably from changing the position from fixed to relative, because relative will add the header back to the normal page flow. So to fix this, you could also toggle the class of whatever is below your header, so when active, it has a margin-top of 0, and when inactive, it has a margin-top equal to the height of the header.