So I found this jquery code to make my nav change its size when a user begins to scroll. It doesn't appear to be working, though...
$(function(){
$('.nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('.nav');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'40px'
}, 600);
}
}
Here is all the code:
http://codepen.io/DerekDev/pen/Bydgpz
So if any of you have a solution, it would be greatly appreciated. Thanks :)
try this:
$(function() {
$(window).scroll(function() {
var nav = $('.nav');
if ($(window).scrollTop() >= 0) {
if(!nav.hasClass("smallNav")) {
nav.hide();
nav.removeClass('bigNav').addClass("smallNav").fadeIn( "slow");
}
} else {
if(!nav.hasClass("bigNav")) {
nav.hide();
nav.removeClass("sml-logo").addClass('bigNav').fadeIn( "slow");
}
}
});
});
and CSS rules:
.bigNav{
height:60px;
}
.smallNav{
height:40px;
}
Firstly, you want to check the window scrollTop, not the body
Secondly, you want to change the height of the UL, not the .nav element, and you seem to have the order mixed up, you probably want 40px when it's small, and 60px when it's big !
$(window).scroll(function(){
var $nav = $('.nav');
if ($(window).scrollTop() > 0) {
console.log($nav.data('size'))
if ($nav.data('size') == 'big') {
$nav.data('size','small').find('ul').stop().animate({
height:'40px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').find('ul').stop().animate({
height:'60px'
}, 600);
}
}
});
PEN
Related
I am trying to change classes of objects in my navbar on scroll for a website I am developing. Basically, when I scroll to certain parts of a webpage I want the links to appear active and to remove the active class when they have been scrolled over.
I have managed to get the links to appear active but can't get it too remove the class. This is what I have so far but it isn't working:
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("navdave").removeClass("active")
}
})
#cards,
#projects,
#dave {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navacard">My navacard</div>
<div id="navprojects">My navprojects</div>
<div id="navdave">My navdave</div>
<br>
<div id="cards">My navacard</div>
<div id="projects">My navprojects</div>
<div id="dave">My navdave</div>
I hope someone can help.
Edit: this is what is now happening:
You forgot to add the # in the removeClass parts:
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("#navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("#navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("#navdave").removeClass("active")
}
})
Update
Try changing your code to this and let me know what the results of each console.log is:
$(document).on('scroll', function() {
console.log($(this).scrollTop());
console.log($('#cards').position().top);
console.log($('#projects').position().top);
console.log($('#dave').position().top);
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("#navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("#navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("#navdave").removeClass("active")
}
})
I'm trying to hide #back when #mobile-nav is positioned 0vw from the left. Here's what I have at the moment...
$(document).ready(function() {
var position = $("#mobile-nav").css("left", "0vw");
if (position < 0vw) {
$("#back").css("display", "none");
} else {
$("#back").css("display", "block");
}
);
Any idea as to why this isn't returning successfully?
Here's a link to the codepen https://codepen.io/spittman/pen/pBqYON
Try this:
var position = parseInt($("#mobile-nav").css("left"));
if (position <= 0) {
$("#back").css("display", "none");
}
else {
$("#back").css("display", "block");
}
try this
$("ul ul").hide();
$("li").click(function(event) {
$(this).children('ul').toggle();
event.stopPropagation();
});
$("li").click(function() {
$(this).siblings().children().hide();
});
$(".nav-child-trigger").click(function(){
$("#mobile-nav").animate({left: '-=100vw'});
});
$("#back").click(function(){
$("#mobile-nav").animate({left: '+=100vw'});
var position = $("#mobile-nav").position().left;
if (position > 0) {
$("#back").css("display", "none");
}
else {
$("#back").css("display", "block");
}
});
$(document).ready(function(){
});
It was brought to my attention that my webpage loads fine in chrome, but my javascript effect only works in Chrome..
It is a fading scroll effect, meaning that the first div is lit up, while the divs below it are dark and when i scroll down the top div gets dark and the one in the middle lights up and so forth.
Could someone please help me figure out why it doesn't work?
Here is my code:
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
if ($(".pathe")[0]) {
if (wScroll > $('.ribfactory a').offset().top) {
$('.ribfactory').addClass('filter');
$('.ribfactory').removeClass('invertedfilter');
$('.pathe').addClass('invertedfilter');
} else {
$('.ribfactory').removeClass('filter');
$('.ribfactory').addClass('invertedfilter');
$('.pathe').removeClass('invertedfilter');
$('.pathe').addClass('filter');
}
var wScroll = $(this).scrollTop();
if (wScroll > $('.pathe a').offset().top) {
$('.pathe').removeClass('invertedfilter');
$('.pathe').addClass('filter');
$('.boozy').addClass('invertedfilter');
} else {
$('.boozy').removeClass('invertedfilter');
$('.boozy').addClass('filter');
}
} else if ($(".muesli")[0]) {
if (wScroll > $('.muesli a').offset().top) {
$('.muesli').addClass('filter');
$('.muesli').removeClass('invertedfilter');
$('.ice').addClass('invertedfilter');
} else {
$('.muesli').removeClass('filter');
$('.muesli').addClass('invertedfilter');
$('.ice').removeClass('invertedfilter');
$('.ice').addClass('filter');
}
var wScroll = $(this).scrollTop();
if (wScroll > $('.ice a').offset().top) {
$('.ice').removeClass('invertedfilter');
$('.ice').addClass('filter');
$('.adventure').addClass('invertedfilter');
} else {
$('.adventure').removeClass('invertedfilter');
$('.adventure').addClass('filter');
}
} else if ($(".polymed")[0]) {
if (wScroll > $('.polymed a').offset().top) {
$('.polymed').addClass('filter');
$('.polymed').removeClass('invertedfilter');
$('.safety').addClass('invertedfilter');
} else {
$('.polymed').removeClass('filter');
$('.polymed').addClass('invertedfilter');
$('.safety').removeClass('invertedfilter');
$('.safety').addClass('filter');
}
} else if ($(".tailoreliza")[0]) {
if (wScroll > $('.ribfactory a').offset().top) {
$('.ribfactory').addClass('filter');
$('.ribfactory').removeClass('invertedfilter');
$('.tailorbnn').addClass('invertedfilter');
} else {
$('.ribfactory').removeClass('filter');
$('.ribfactory').addClass('invertedfilter');
$('.tailorbnn').removeClass('invertedfilter');
$('.tailorbnn').addClass('filter');
}
var wScroll = $(this).scrollTop();
if (wScroll > $('.tailorbnn a').offset().top) {
$('.tailorbnn').removeClass('invertedfilter');
$('.tailorbnn').addClass('filter');
$('.tailoreliza').addClass('invertedfilter');
} else {
$('.tailoreliza').removeClass('invertedfilter');
$('.tailoreliza').addClass('filter');
}
}
});
I search scripts, which will be behaviour during scroll: http://www.dishoom.com/.
I have three sections of the site and would like to scrollowaniu to the middle of the section equalized it to the upper position. The example is above
Regards
<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>
my custom responsive accordions are not working. Requirement is to have heading and content for the desktop view but if it loads on smaller device will turn to accordions. I have just achieved it. But when I re-size the window it doesn't work well and functionality behaves weird animation and sometime it does't work.
Can anyone please help me to find out what is the problem in my code?
Below are jsBin URL and js code:
URL:
http://jsbin.com/zarak/5/edit
Code:
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.reponsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
$(window).resize(function(){
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.reponsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
});
Many thanks,
Mufeed Ahmad
Try this, here's a FIDDLE
$(window).resize(function() {
if($(this).width() < 360) {
$('.reponsiveTap').slideUp(400, 'linear');
$('.in-row h2').on('click', function() {
$('.reponsiveTap').stop().slideUp(400, 'linear').removeClass('active');
$(this).next('.reponsiveTap').stop().slideToggle(400, 'linear').addClass('active');
});
}
else {
$('.reponsiveTap').slideDown(400, 'linear');
$('.in-row h2').off('click');
}
});