I am fairly new to js but I am trying to get this to fire so that my nav div will stick to the top of the screen I am not sure if my window on the scroll function is firing correctly.
$(document).ready(function() {
"use strict";
$('#commons').window.onscroll(function(direction) {
$('.main-nav').toggleClass('fixed-nav', direction == 'down');
$('.main-nav a').removeClass('active');
$('.main-nav a.commons-btn').addClass('active');
}, {
offset: '90px'
});
});
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
// Type here your script, this will run on scrolling
} else {
// This script will run when the scroll bar is on the top
}
});
});
Related
I'm trying to add a 'fixed' class to a menu once the scroller hits that menu. I've managed to get it working, but having problems removing the class once the user scrolls back to the top.
Here is the site I'm working on: http://www.allbyor.com/
Here's is my JS code:
$(window).bind('scroll', function () {
var menu = $('.bottom-row');
if ($(window).scrollTop() >= menu.offset().top) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
You need to register the original value of the menu.offset().top in a variable, because once you change its class to fixed the top value will be the same as the $(window).scrollTop().
JSFiddle demo.
var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= menu_top_value) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
Hi I am fairly new to javascript and I am simply trying to fade in the navbar after it reaches a specific element/class instead of using the distance from the top of the window.
// Navigation bar - show on scroll
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 200) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
You can use .offset() to get an elements position relative to the document.
so (outside of your window.scroll function do something like.
var offset = $('.myTriggerClass').offset().top;
then change your condition to
if ($(this).scrollTop() > offset)
so you would end up with
$(".navbar").hide();
// set distance user needs to scroll before we fadeIn navbar
var offset = $('.myTriggerClass').offset().top;
// fade in .navbar
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
see http://liveweave.com/Pieivc
what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish
how can i do to check it ?..
(function () {
$('#scrollup').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({scrollTop: 0}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
$('#scrolldown').on({
'mousedown touchstart': function() {
$(".sidebar-menu").animate({
scrollTop: $(".sidebar-menu")[0].scrollHeight
}, 2000);
},
'mouseup touchend': function() {
$(".sidebar-menu").stop(true);
}
});
})();
You can check this using $('.sidebar-menu').scrollTop() value.
So for example, I wrote a function called check(), which checks the location of the scroll and display/hide the appropriate arrows. This function is called on mouse touchend event of each arrow.
function check() {
if ($('.sidebar-menu').scrollTop() == 0) {
$('#scrollup').hide();
$('#scrolldown').show();
} else if ($('.sidebar-menu').scrollTop() == height - 100) {
$('#scrolldown').hide();
$('#scrollup').show();
}
}
See it in action: http://jsfiddle.net/ry2zwho1/1/
Try to use this jsfiddle
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
$(".btnPrevious").css('color', 'red').show();
itemWidth =......
I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu is set on {display: none;}.
This should work
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Codepen Demo
It's working for me.
Your .menu is probably at the top of a page and when you scroll you can't see it.
Add to test:
.menu {
position: fixed;
z-index: 10000; //just to check if it is behind the content
}
DEMO
Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! It works fine!
I am using a template and it come with a jQuery function to detect the window width, but it only works if you open the window up or refresh the page, not when you adjust the window width.. From what IU have read I need to integrate the resize function into my codebase
$(window).resize(function()
but as my jQuery is limited I'm not sure how to put it in this script
var ww = $(window).width();
/* Menu */
$(document).ready(function() {
"use strict";
$('body').find("#mainmenu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$('body').find(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$('body').find("#mainmenu").toggle();
});
adjustMenu();
});
$(window).load(function () {
$('body').find("#mainmenu").css('pointer-events', 'auto');
});
var adjustMenu = function() {
"use strict";
if (ww < 900) {
$('body').find(".toggleMenu").css("display", "inline-block");
if (!$('body').find(".toggleMenu").hasClass("active")) {
$('body').find("#mainmenu").hide();
} else {
$('body').find("#mainmenu").show();
}
$('body').find("#mainmenu li").unbind('mouseenter mouseleave');
$('body').find("#mainmenu li a.parent").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 900) {
$('body').find(".toggleMenu").css("display", "none");
$('body').find("#mainmenu").show();
$('body').find("#mainmenu li").removeClass("hover");
$('body').find("#mainmenu li a").unbind('click');
$('body').find("#mainmenu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).toggleClass('activelink');
$(this).find("ul").toggleClass('animatedfast');
$(this).find("ul").toggleClass('fadeInUp');
});
$('body').find("#mainmenu ul li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
$(this).find("ul li").toggleClass('animatedfast');
$(this).find("ul li").toggleClass('fadeInLeft');
});
}
};
I can see that the logic is taking place in the adjustMenu function, so would I wrap that in the resize function?
Maybe I'm missing something obvious, but why not pull the whole thing out of
$(document).ready ()
Place it in a function
Function doAllOfThis (
//do everything
);
And then call it on document ready?
$(document).ready(function ({
doAllOfThis();
});
$(widow).resize (function ({
doAllOfThis();
});
I don't see anything that would be an issue. But you could just extract the code with "if ww =" conditions and move that to a function, then do as above with the function.
BETTER SOLUTION
Just noticed the
adjustMenu();
Function is already set for you, so add
$(window).resize(function({
var ww = $(window).width();
adjustMenu();
});
Utilize the resize event.
$(window).resize(function() {
var ww = $(window).width(); // will contain width after resize
// your adjust logic here
});