Got a JS/JQuery issue I'm struggling to solve.
I'm building a simple one page site with a fixed header and anchor based scrolling navigation. When a user clicks a link the the scrollTop of the body is animated to the top of the relevant section. Included in this function is a calculation that subtracts the height of the header from the scroll distance to ensure the fixed header doesn't obscure the top of the section
The issue I'm having is because of a separate function that applies a class to the header if a user scrolls past a certain distance. This class causes a few properties to change and therefore the height of the header element changes.
This means that the value of $('header').outerHeight(); at the end of the scrolling animation is smaller than what it was when the animation began. This change means that the distance scrolled is wrong and the window ends up slightly too short of the desired location.
How do I allow for this change in value during the scrolling animation? Ideally I want everything to stay dynamic rather than specifying fixed heights/sizes. TIA.
$('a[href^="#"]').on("click", function() {
let headerHeight = $('header').outerHeight();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeight
}, 500);
});
$(window).on('load resize scroll', function() {
if ($(window).scrollTop() >= 100 ) { // this refers to window
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
body,html {
margin: 0;
padding: 0;
}
header {
padding: 30px 30px;
position:fixed;
left:0;
right: 0;
top: 0;
z-index:99;
transition: all .3s ease;
}
header h1 {
display:inline-block;
width:10%;
color: white;
}
header.scroll {
background: black;
padding: 15px 30px;
}
header nav {
display:inline-block;
width: 89%;
}
header nav ul {
margin: 0;
list-style: none;
text-align:right;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
color: white;
padding: 0 10px;
}
.hero {
height: 600px;
background: blue;
}
section h2 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
text-align: center;
color: white;
}
section {
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Section 1 </li>
<li>Section 2 </li>
<li>Section 3 </li>
</ul>
</nav>
</header>
<section class="hero"><h2>Hero</h2></section>
<section id="one"><h2>Section 1</h2></section>
<section id="two"><h2>Section 2</h2></section>
<section id="three"><h2>Section 3</h2></section>
If you run the above snippet and click on the link for "Section 1" at the top of the page. You can see the distance scrolled is slightly too short and the bottom of the .hero element is still visible due to the change in height.
Try this, I'm subtracting 30 from header's height because in start padding was "30px 30px" and then it's going to be "15px 30px" means header height should be:
height = actualHeight - - ,
and this required when your header is expanded(means header does not have class scroll) so I added condition.
$('a[href^="#"]').on("click", function() {
let headerHeight = $('header').outerHeight();
if(!$('header').hasClass('scroll')) {
headerHeight -= 30; //The padding removed
}
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeight
}, 500);
});
$(window).on('load resize scroll', function() {
if ($(window).scrollTop() >= 100 ) { // this refers to window
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
body,html {
margin: 0;
padding: 0;
}
header {
padding: 30px 30px;
position:fixed;
left:0;
right: 0;
top: 0;
z-index:99;
transition: all .3s ease;
}
header h1 {
display:inline-block;
width:10%;
color: white;
}
header.scroll {
background: black;
padding: 15px 30px;
}
header nav {
display:inline-block;
width: 89%;
}
header nav ul {
margin: 0;
list-style: none;
text-align:right;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
color: white;
padding: 0 10px;
}
.hero {
height: 600px;
background: blue;
}
section h2 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
text-align: center;
color: white;
}
section {
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Section 1 </li>
<li>Section 2 </li>
<li>Section 3 </li>
</ul>
</nav>
</header>
<section class="hero"><h2>Hero</h2></section>
<section id="one"><h2>Section 1</h2></section>
<section id="two"><h2>Section 2</h2></section>
<section id="three"><h2>Section 3</h2></section>
Ended up solving this by adding a callback to my animation function. The callback checks if the height of the header has changed since the function was first called and if it has, then the scrollTop is increased by this amount.
$('a[href^="#"]').on("click", function() {
let headerHeightOne = $('header').outerHeight();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headerHeightOne
}, 500, function() {
let headerHeightTwo = $('header').outerHeight();
let difference = headerHeightOne - headerHeightTwo;
if (difference > 0 ) {
$('html,body').animate({
scrollTop: $(window).scrollTop() + difference
}, 100);
}
});
});
Related
I need to target this :after in jQuery:
.a1 {
position: relative;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
background: #3f92c3;
}
The scroll code looks like this (example):
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {}
});
});
HTML:
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
I found this out after searching alot and it worked byt i don't know how the underline can keep the hover color after i mouseleave .a1 :
$('#menuwrapper').mouseenter(function() {
if ($('#pseudo').length) {
$('#pseudo').remove();
} else {
var css = '<style id="pseudo">.a1::after{background: red !important;}</style>';
document.head.insertAdjacentHTML('beforeEnd', css);
};
});
I tried mouseleave but it didn't work.
So i just want that if i scroll (that i know how it works) that the underline under the menu .a1 stay's black , because if i leave the underline hover it goes back to
.a1:after {
background: #3f92c3;
}
I want it to stay black.
pseudo elements like :before and :after are not the part of DOM because they are not real elements as called pseudo...so you can't target them using jQuery
As you are adding class scrolled on scroll, so better to use this class in css like
.scrolled .a1:after{
background: black;
}
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
});
});
body {
margin-top: 150px;
font: 13px Verdana;
height: 500px
}
#header {
list-style: none;
padding: 0;
display: flex;
}
#header li {
margin: 0 10px;
}
.a1 {
position: relative;
font-weight: bold;
text-decoration: none;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
}
.scrolled .a1:after {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="header">
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
</ul>
try to use jQuery hover method, but also you cant touch :after :before elements from jQuery
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");});
I'm trying to write a function that watches the window for a few things:
If the window is greater-than 900px and the window is scrolled passed 100 add a BG color to the nav
If the nav is scrolled passed 100 and the window is resized to less-than 900px change the BG color nav.
I've written two functions that should be doing the trick. My problem is my functions work right up until you scroll passed 100 and resize the screen: they won't apply the second class with the second bg color.
Snippet below. Can anyone provide assistance?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches && $('nav').hasClass('scrolled')) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Your code is working fine it is even applying the second class with the second bg color if you will resize slowly your window. The only issue is this if( mq.matches && $('nav').hasClass('scrolled')) condition. As you have mentioned $('nav').hasClass('scrolled') so first time when you will resize it will be true and then
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
this will apply scrolledTwo class to nav. After that when you will further resize it will never pass this if( mq.matches && $('nav').hasClass('scrolled')) condition, until you don't resize the screen width to less than 100px or greater than 900px and scroll, and will always goto else and you will always see the red color. Try removing it
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches ) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Another issue in your code is if I scroll and resize the screen width between 100 to 900 and then again resize it to out of this window then there is no class assigned to your div and that is due to no class added in else of resize function. Changing that to this will do that trick also :)
else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
var scroll = $(window).scrollTop();
if( scroll > 100 ) {
$('nav').addClass('scrolled');
}
}
Here is the link to codepen: https://codepen.io/rishabhp/pen/aNXVbQ?limit=all&page=7&q=navigation+bar
I am using Brackets and created a html,css,js file. Everything seems to be working except for the js. I've linked the css and js files on the head section. Do I somehow have to link something else or download an extra file?
Head tag looks like this:
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="theFile.js"></script>
HTML code:
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
CSS code:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/* Navigation */
nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #1ABC9C;
}
nav ul {
padding: 20px;
margin: 0 auto;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
padding: 10px 0;
color: #fff;
font-size: 1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #34495E;
}
a.active {
border-bottom: 2px solid #ecf0f1;
}
/* Headings */
h1 {
font-size: 5rem;
color: #34495E;
}
/* Sections */
section {
width: 100%;
padding: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
height: 500px;
text-align: center;
}
section:nth-child(even) {
background: #ecf0f1;
}
section:nth-child(odd) {
background: #bdc3c7;
}
.sections section:first-child {
margin-top: 60px;
}
section.active {}
footer {
height: 500px;
background: #34495e;
}
JS code:
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
You have to include your JavaScript files after including the jquery.min.js. Otherwise your code gets executed before jQuery is initialized.
Remove <script src="theFile.js"></script> in the head tag and add it at the very bottom of your HTML.
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="theFile.js"></script>
You can check your console (shortcut: F12), there should be a error like
$ is not defined
in the console.
Edit:
You can ensure jQuery is initialized when your code is executed by waiting to load the page completely. You just have to wrap your code with $(document).ready() function.
$(document).ready(function(){
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
});
I'm trying to create a menu that slides in and out from the right hand side of the screen for a mobile version of a site.
I have a 'ul' that starts off screen on page load due to its large margin. The plan is to have a button that will toggle that margin back and forth with '.animate' in order to hide and reveal the 'ul'.
The first chunk of code below works but won't repeat. So, on 'click', the menu appears, hides and then appears once more before it stops responding. This confused me so I tried a different route and went with an 'if' statement but now it just keeps sliding left despite the class definitely changing (i've checked it in the console).
Now i'm stumped! Can anyone help?
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
var $inactive = $("<div class='mm-inactive'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($inactive);
$($inactive).click(function() {
$($inactive).hide();
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
$(".mobile-menu").prepend($active);
});
$($active).click(function() {
$(this).nextAll("ul").animate({'margin-left': '+='+90}, 1000);
$($active).remove();
$($inactive).show();
});
});
//And here with the 'if' statement...
$(function() {
// create identical menu buttons with different classes
var $mm_btn = $("<div><hr><hr><hr></div>");
var $classname = ($mm_btn).attr("class");
// append mobile menu button to menu div
$(".mobile-menu").prepend($mm_btn);
$($mm_btn).click(function() {
$($mm_btn).toggleClass('active');
if($classname === 'active') {
$(this).next("ul").animate({'margin-left': '+='+90}, 1000);
} else {
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
}
});
});
.mobile-menu {
position: absolute;
top: 5px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<div class="mobile-menu">
<ul>
<li class="projects">projects</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
In first case, when you are removing element all events are also removed: .remove()
In second case: $classname was set to empty string on page load and is never changed this is why only else is executed.
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($active);
$($active).click(function() {
if ($active.hasClass('mm-active')) {
$(this).nextAll("ul").animate({
'margin-left': '-=' + 90
}, 1000);
} else {
$(this).nextAll("ul").animate({
'margin-left': '+=' + 90
}, 1000);
}
$active.toggleClass('mm-active');
});
});
body {
overflow: hidden;
}
.mobile-menu {
position: absolute;
top: 35px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-menu">
<ul>
<a href="projects.html">
<li class="projects">projects</li>
</a>
<a href="about.html">
<li>about</li>
</a>
<a href="contact.html">
<li>contact</li>
</a>
</ul>
</div>
I'm having a flickering issue with my bottom-border (nav link) when I scroll within a certain section. I suppose it's not really a flicker, but a transition that's being resetted every time I scroll within that section. For example (refer to source below), if my window is currently in a section and I scroll little by little, the border-bottom of my active nav link will flicker. In addition, if I hold onto the scroll bar and scroll down, the border-bottom disappears.
I'd like for it to:
1) Not flicker when scrolling.
2) When scrolling on the page with the scroll bar, keep the border-bottom present.
http://jsfiddle.net/binhxn89/zzmbex55/16/
HTML:
<body>
<div class="navbar">
<div class="container cf">
<ul>
<li>Home</li>
<li>Link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
</div>
<section id="welcome" class="welcome"></section>
<section id="link1" class="link1"></section>
<section id="link2" class="link2"></section>
<section id="link3" class="link3"></section>
<section id="link4" class="link4"></section>
</body>
CSS:
body, html {
height: 100%;
color: #f3f3f3;
font-family: Arial, sans-serif;
}
body {
margin: 0;
overflow-x: hidden;
}
.container {
width: 90%;
margin: 0 auto;
}
.navbar {
background: rgba(0,0,0, 0.9);
width: 100%;
position: fixed;
z-index: 20;
}
.navbar ul li {
list-style: none;
float: left;
}
.navbar ul li a {
color: #fff;
display: block;
font-size: 14px;
margin: 0 10px;
padding: 20px 5px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navbar ul li a:hover,
.navbar ul li a.active {
margin-top: -3px;
font-weight: bold;
padding-bottom: 8px;
border-bottom: 2px solid #fff;
}
section {
height:100%;
z-index: 10;
position: relative;
}
.welcome {
background: #ebebeb;
}
.link1 {
background: #aaa;
}
.link2 {
background: #bbb;
}
.link3 {
background: #ccc;
}
.link4 {
background: #ddd;
}
JS:
$(document).ready(function() {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 10) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 600);
return false;
}
}
});
})
If anyone could help or refer me to a particular source regarding this issue, that would be great. Thanks!
Please take a look here or take a look at the code below. First, I calculate the heigh of one element and get his position. After that I compare the part to the current position. So far, no flickering on Safari or Chrome, I hope this will fix it. It seams that your solution raised multiple events, if you look at the console.log(y); you will notice a lot of double values for part 2, 3, 4 and 5.
$(window).scroll(function() {
var y = $(this).scrollTop();
var sectionHeigth = $('section').height();
var part = Math.round((y / sectionHeigth));
$('.link').each(function(event) {
var position = $($(this).attr('href')).offset().top;
if ((part * sectionHeigth) != position) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
Here is the update to your comment. I'll check if the current position is between the start and start + height position. That's all.
$(window).scroll(function() {
var y = $(this).scrollTop();
$('.link').each(function(event) {
var position = $($(this).attr('href')).offset().top;
var a = $($(this).attr('href')).height();
if (y >= position && y <= position + a) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});