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")
}
})
Related
The class 'stuck-sm' is added, but 'stuck-md' is not.
if ($(window).scrollTop() >= 285) {
$('.something').addClass('stuck-sm');
} else if ($(window).scrollTop() >= 430) {
$('.something').addClass('stuck-md');
} else {
$('.something').removeClass('stuck-sm','stuck-md');
}
else if is reachable only if the value is less than 285 which means second else if block won't get execute. Below is the correct solution.
if ($(window).scrollTop() >= 430) {
$('.something').addClass('stuck-md');
} else if ($(window).scrollTop() >= 285) {
$('.something').addClass('stuck-sm');
} else {
$('.something').removeClass('stuck-sm','stuck-md');
}
I want my scroller to hide when you come to bottom of page.
I wrote this code and it works fine:
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
}
}
</script>
But now the scroller is hidden also when you go back to top.
I want to show #scroller again when user scroll back to top.
Simply add an else case that display it:
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='none';
}
else{
document.getElementById("scroller").style.display='block';
}
$(document).ready(function(){
$("div").scroll(function(){
if($("div").scrollTop()==0)
$("scroller").show();
else
$("scroller").hide();
});
});
In JQuery you can use this.
Try Following
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#scroller').hide('slow');
}
else if($(window).scrollTop()==0)
{
$('#scroller').show('slow');
}
});
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
} else {
document.getElementById("scroller").style.display='block';
}
}
</script>
I am trying to display image on full screen on image click. In other words o click of image it will show in full screen
I tried like this but not working
$(".imageBlock").click(function () {
$('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});
https://jsbin.com/hayalobixo/1/edit?html,css,js,output
$(function() {
var counter = 0;
$('.currentPage').text(counter+1);
$('#pre').prop('disabled', true);
$('#next').click(function() {
if (counter < 4) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
$('.currentPage').text(counter+1);
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
$('.currentPage').text(counter+1);
})
$('#next, #pre').click(function() {
if (counter == 0) {
$('#pre').prop('disabled', true);
} else if (counter == 4) {
$('#next').prop('disabled', true);
} else {
$('#pre').prop('disabled', false);
$('#next').prop('disabled', false);
}
})
$(".imageBlock").click(function () {
$('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});
})
CSS:
div.imageBlock.full{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
JS:
$(".imageBlock").click(function () {
$('.imageBlock').addClass("full");
});
You can use - div as absolute positioned
$(function() {
$(".imageBlock").click(function () {
$(this).css({'width':'100%','height':'100%','z-index':'9999','position':'absolute'})
});
https://jsbin.com/kowogukave/edit?html,css,js,console,output
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');
}
}
});
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