I've added some simple animated scrolling to my website, however there's a little quirk with this in jQuery. I slideDown() a .nav-fixed navigation bar whenever the website's window top is under a static .nav navigation from the top of the website. Everything's fine except that when you click on any link (I assume any link with jQuery onClick animated scroll function) the .nav-fixed hides momentarily and shows up again after the website scrolls. I'm console logging a message Should hide the nav whenever the the top static .nav is in the window view and noticed that even when we're on the bottom of the page and click on any onclick jquery function link on the website the message gets logged once as if the static navigation was in the window view.
Does anyone have any ideas how to resolve that?
Here's the mentioned website: http://www.mmsmsy.com
Here's the code:
const addClickToNav = (element) => {
$(window.opera ? 'html' : 'html, body').animate({scrollTop: $(element).offset().top - 50}, 1000);
}
$('.nav-link-top').on('click', () => $(window.opera ? 'html' : 'html, body').animate({scrollTop: 0}, 1000));
$('.link-start').on('click', () => addClickToNav('.about'));
$('.nav-link-skills').on('click', () => addClickToNav('.skills'));
$('.nav-link-portfolio').on('click', () => addClickToNav('.portfolio'));
$('.nav-link-contact').on('click', () => addClickToNav('.contact'));
$(window).scroll(function() {
if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
$('.nav-fixed')
.css('display', 'flex')
.hide()
.slideDown();
}
if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50) {
console.log("Should hide the nav");
$('.nav-fixed').slideUp();
}
});
did u try like this :
$(window).scroll(function() {
if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
$('.nav-fixed')
.css('display', 'flex')
.hide()
.slideDown();
}
else if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50)
{
console.log("Should hide the nav");
$('.nav-fixed').slideUp();
}
});
Related
I want to hide my navbar when scrolls down and show when scrolls up, but scrolls down occurs after the windows has been scrolled x amount of pixels down the page.( in the code after #section1 ) and if scrolls up shows the navbar immediately.I am using this code but I don't know how could I define a position.
var scrollp=0;
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// ask about the position of scroll
if ($(this).scrollTop() < scrollp) {
$('.navbar').fadeIn();
scrollp= $(this).scrollTop();
} else {
$('.navbar').fadeOut();
scrollp= $(this).scrollTop();
}
});
});
});
}(jQuery));
Just check the scrollTop in the else clause, like this:
... else {
scrollp = $(this).scrollTop();
if (scrollp > fadeOutAfter) // Set fadeOutAfter to wherever you want the navbar to fade out
$('.navbar').fadeOut();
}
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
I have a problem with the scrolling animation. Jumpy scroll occurs when the page is scrolled after scroll-animation. I suspected the scroll-event repeats itself, but I'm not sure. Can you help me with it?
$(document).ready(function(){
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
if (e.originalEvent.wheelDelta < 0) {
//mouse scroll down
console.log('Down: ' + offset + " " + anchor);
if (offset >= anchor) {
// if anchor has been scrolled, user can scroll further
// the problem ocuurs in this block
return true;
} else {
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
$("#navigation").addClass("nav-fixed");
return false;
}
} else {
//mouse scroll up
if (offset < anchor) {
$("#navigation").removeClass("nav-fixed");
return true;
}
}});
});
JSFiddle: http://jsfiddle.net/0noms3cs/
Thank you a lot!
Your issue is simple. The scroll event fires over and over again. Your line of thinking behind the cause of this issue is correct, you have a large number of animate events that get stacked up which causes this weird behavior.
You can resolve this issue by adding a boolean variable (such as scrollInitialized) that starts out as false and gets flipped to true once the scroll event has fired once.
Here's the altered JS code. Note: I only added the scrollInitialized variable and a check for it in the if statement.
Edit: I also removed the inner if-else case since it was not necessary using this design.
EDIT 2: I originally misunderstood what you wanted to do. What you need to do was add a scrollLock variable that would only be set to true for the duration of your animation. After thinking about this, I implemented it for you. Here is the Jsfiddle:
https://jsfiddle.net/04gaaapo/1/
Here is the new JS code:
$(document).ready(function () {
var scrollLock = false;
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
// if scroll is NOT locked and we are above the anchor
if (scrollLock === false && offset < anchor) {
if (e.originalEvent.wheelDelta < 0) {
// scrolling down
scrollLock = true;
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// add nav class
$("#navigation").addClass("nav-fixed");
} else if (e.originalEvent.wheelDelta > 0) {
// scrolling up
scrollLock = true;
// animate to top of page
$("body, html").animate({
scrollTop: 0
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// remove nav class
$("#navigation").removeClass("nav-fixed");
}
}
});
function toggleLock() {
scrollLock = !scrollLock;
};
});
I have the code below which fades in/out a div for a contact page. I would like this page to have its own URL so when users type that into the address bar, the page loads up with the div already activated. Also, if possible, I would like it so when users click 'back' or 'forward' on their browsers, this page behaves like how a regular page would meaning the history is kept intact.
How should I go about applying this feature to what I already have?
var c = 0;
var contactHeight = $('#contact-keebs').outerHeight();
function contactFadeIn() {
$('#contact-keebs').fadeIn(200);
$('body').css({
height : contactHeight,
overflow : 'hidden'
});
$('#contact-info, #clients').addClass('animated fadeInUp');
}
function contactFadeOut() {
$('#contact-info, #clients').removeClass('animated fadeInUp');
$('body').css({
height : '',
overflow : ''
});
$('#contact-keebs').fadeOut(200);
}
$('#mail-wrap').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$('#contact-button').addClass('project-button').css('width', '71px').text('Projects');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-projects.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeIn);
} else {
contactFadeIn();
}
} else {
$('#contact-button').removeClass('project-button').css('width', '96px').text('Get in touch');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-contact.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeOut);
} else {
contactFadeOut();
}
}
});
MAY HELP USING API PUSHSTATE ?.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
how to detect when div scroll bar, scroll up and hit the top(only when it hit the top)
I have found another post, but this one is hit the bottom.
what i need is hit the top. anyone know how to change this?
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert(1);
}
});
Know when vertical scrollbar hits bottom of scroll in div
working fiddle
var el = $('.test');
el.on('scroll', function(){
if(el.scrollTop() == 0){alert("i just hit the top")}
});
scrollTop will be 0 when the scroll bar is that the top. Try this:
$("#divID").scroll(function () {
if ($(this).scrollTop() == 0) {
alert(1);
}
});
Example fiddle
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert("Bottom");
}
if($(this).scrollTop() == 0)
{
alert("Top");
}
});
Fiddle is here