I have this navigation for mobile that i want to hide/show depending on which direction the viewport gets scrolled in. So if scrolling down i want it to hide, and scrolling up i want it to show.
My current code looks like this. It just toggles on scroll top. Anyone?
$(function() {
$(window).on("scroll touchmove", function () {
$('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
Maybe something like this:
var menu_height = 80;
var menu_visible = true;
var old_scroll = $(window).scrollTop();
function checkMenu() {
new_scroll = $(window).scrollTop();
if (old_scroll < new_scroll && new_scroll > 0) {
// Scroll down
if (menu_visible == true) {
toggleMenu();
}
} else if (old_scroll > new_scroll) {
// Scroll up
if (menu_visible != true) {
toggleMenu();
}
}
old_scroll = new_scroll;
}
function toggleMenu() {
if (menu_visible == true) {
// Hide
$('#menu').animate({top: '-='+menu_height+'px'}, 200, function(){ $(this).css('display', 'none') });
menu_visible = false;
} else {
// Show
menu_visible = true;
$('#menu').css('display', 'block').animate({top: '+='+menu_height+'px'}, 200);
}
}
$(document).ready(function() {
// Show / hide menu on scroll
setInterval(checkMenu, 100);
});
Codepen: http://codepen.io/anon/pen/dPGggg
Related
I need to load 2 different animated graphic on window scroll up/down on a website by triggering some functions, it's working but its buggy as the functions are triggered too many times when scrolling:
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
loadLogoAnimeDown();
}else{
loadLogoAnimeUp();
}
});
You need a way to check if the functions have been called (and logo has been loaded), so you can use a variable for that. After the logo has been loaded, you set the variable as false, which prevents them from loading more than once.
var downNotLoaded = true;
var upNotLoaded = true;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if(downNotLoaded){
loadLogoAnimeDown();
downNotLoaded = false;
}
}else{
if(upNotLoaded){
loadLogoAnimeUp();
upNotLoaded = false;
}
}
});
I think you might find this is a very hacky way to do it, but this should work.
var animated;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if (animated == true) {
loadLogoAnimeDown();
animated = false;
}
} else{
if (animated == false) {
loadLogoAnimeUp();
animated = true;
}
}
});
I have a div with a 2 logos in it and on scroll the first logo hides and the second appears using classes. On reverse scroll the second logo should hide and the first reappear. The first is reappearing but the second is hiding then reappearing when I reach the top of the page.
I've been going around in circles and I can't understand why on reverse scroll the 'show-logo' class is reappearing. Can anyone explain why?
JS:
if ($(window).width() > 640){
var scrollTop = $(window).scrollTop();
var header = $(".site-header");
if (scrollTop > 50) {
header.addClass("scrolling");
setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
else {
header.removeClass("show-logo scrolling");
};
} else {
header.removeClass("show-logo scrolling");
}
Thanks in advance.
The setTimeout has no clue that it should not run so it runs. So if you do not want it to execute it, you need to cancel it. Two different ways depending on what you want to happen.
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if (myTimer) {
window.clearTimeout(myTimer)
}
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
} else {
header.removeClass("show-logo scrolling");
}
} else {
header.removeClass("show-logo scrolling");
}
});
or
var myTimer = null;
var header = $(".site-header");
var win = $(window);
win.on("scroll", function() {
if ($(win.width() > 640) {
var scrollTop = win.scrollTop();
if (scrollTop > 50) {
header.addClass("scrolling");
if (!myTimer) {
myTimer = setTimeout(function() {
header.addClass("show-logo");
}, 500);
}
} else {
header.removeClass("show-logo scrolling");
if (myTimer) {
window.clearTimeout(myTimer)
myTimer = null
}
}
} else {
header.removeClass("show-logo scrolling");
}
});
I am trying to stimulate a web chat room for which the page needs to be:
Scrolled to bottom of the page after some interval if the user hasn't scrolled.
Stop scrolling if the user has scrolled.
Starts scrolling to bottom of page if user reaches a div #end
<script>
var scroll = 1;
function autoScrolling(scroll) {
if(scroll==1){
window.scrollTo(0,document.body.scrollHeight);
}
}
window.onscroll = function() {
setInterval(autoScrolling(0), 1000);
}
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("end");
if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
scroll=1;
setInterval(autoScrolling(0), 1000);
}
});
</script>
I am applying this logic but it isn't working.
Try this,
var scrolled = false;
$(document).ready(function(){
//First requirement
window.setInterval(function(){
checkScroll();
}, 5000);
//Second requirement
window.onscroll = function() { setScroll()};
//Third requirement
$('#end').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
autoScroll();
}
})
})
function autoScroll(){
window.scrollTo(0,document.body.scrollHeight);
}
function setScroll(){
if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
scroll=true;
}
}
}
function checkScroll(){
if(!scrolled)
autoScroll();
scrolled = false;
}
I have a modal, that shows after scroll and disappears on top of the page. But, I want it wouldn't shows again if I press the close button on it. (Now, if i close the modal, it shows again over and over and it's very annoying)
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
$('#modal-name').css({"display":"block"});
} else {
$('#modal-name').fadeOut();
}
});
$(document).ready(function() {
$(".close-modal, .modal-sandbox").click(function(){
$(".modal").css({"display":"none"});
});
});
Use a flag shouldDisplayModal and persist it to window.localStorage like so:
var shouldDisplayModal = localStorage.getItem("shouldDisplayModal") == null ? (localStorage.setItem("shouldDisplayModal", true) || localStorage.getItem("shouldDisplayModal")) : localStorage.getItem("shouldDisplayModal");
$(document).scroll(function () {
if (shouldDisplayModal) {
var y = $(this).scrollTop();
if (y > 400) {
$('#modal-name').css({"display":"block"});
} else {
$('#modal-name').fadeOut();
}
}
});
$(document).ready(function() {
$(".close-modal, .modal-sandbox").click(function(){
$(".modal").css({"display":"none"});
localStorage.setItem("shouldDisplayModal", false);
});
});
I'd like to add a class to an element when a user first scrolls away from the top of the page. If the user then scrolls back up and hits the top of the page I'd like that class removed.
Use of jQuery in the solution is fine.
try
$(window).scroll(function() {
$("id or class").removeClass("active");
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$("#one").addClass("active");
}
else if (scroll <= 1000) {
$("#tow").addClass("active");
}
else {
$("#three").addClass("active");
}
}
So here is the solution you're looking for. Just customize it with your div tags.
$(document).ready(function () {
$(window).scroll(function(){
// get the height of #wrap
var h = $('#top').height();
var y = $(window).scrollTop();
if( y > (h*.25) ){
$("#sidef").fadeIn(1100);
} else {
$('#sidef').fadeOut(75);
}
});
});
var notAdded = true;
$(window).scroll(function(){
if( $(this).scrollTop() == 0){
$(elem).removeClass('classname');
notAdded = true;
}
else if(notAdded){
$(elem).addClass('classname');
notAdded = false;
}
});