We Keep Coding

Javascript scroll addClass

I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?

It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}

You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp

Using jQuery in certain screen sizes

I need a mobile navigation to stick after the user has scrolled a certain amount. When a user has scrolled 205px on desktop resolution the navigation will stick no problem.
How do I change this to 64px after the screen size has gone below 767px? and how do I cancel the desktop jQuery from taking effect on a mobile?
Current desktop javascript:
$(window).scroll(function(){
if ($(this).scrollTop() > 205) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
});
Current mobile javascript:
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
$(window).scroll(function(){
if ($(this).scrollTop() > 64) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
})
}
};
Suggestions would be much appreciated.
Thank you.

You can add a class mobile to your body for example when the matchmedia matches.
$(document.body).toggleClass('mobile', window.matchMedia('(max-width: 767px)').matches);
Once you have that, the checkPosition simply has to get the proper scrollTop value.
function checkPosition() {
var scrollY = $(document.body).hasClass('mobile') ? 64 : 205;
$('.sidemenu').toggleClass('fixed', $(window).scrollTop() > scrollY);
};
Or simply add the matchMedia test instead of the hasClass test.
Additionally, I expect the height of the "fixed container" to be dynamic.
Maybe something like:
var scrollY = $('header').height(); // just an idea ofcourse to get 64 or 205.

You can check screens size in resize wvent like this
var width;
$(window).resize(function () {
width = $("html").width();
});
than in scroll event (or in other place) you can check:
if (width <= 767) {
// do some for small screen
}
else if (width > 767 && width < 1200) {
// do some for medium screen
}
//if..

Javascript DIV Movement on scroll

NIm creating an animation that moves a div incrementally on scroll. I'm close but I don't think my code is the most efficient and I don't know how to adapt it to add more arguments. So for instance, hitting a certain height on the page will then move the object right and stop moving it down. Below is my JS and the codepen can be found at;
http://codepen.io/anon/pen/KxHwu - Original
http://codepen.io/anon/pen/DLxqg - Messing about with moving right
var lastScrollTop = 0;
var boxPosition = $('#box').position();
var row2Position = $('#row2').position();
var distance = $('#row2').offset().top,
$window = $(window);
console.log(distance);
$window.scroll(function() {
if ( $window.scrollTop() >= distance - 400 ) {
var st = $(window).scrollTop();
console.log(st);
$('#box').css({top: 0 + st});
//CODE NOT WORKING
if(st >= 270) {
var boxPos = $('#box').position();
console.log(boxPos.left);
$('#box').css({left: boxPos.left + st});
}
//
lastScrollTop = st;
}
});
I'm looking for the box to start scrolling like it does, then when it hits half of row 2 scroll right.
I hope I have explained this in an easy way!
Thanks

http://codepen.io/anon/pen/tHwlq
Here is an example of how to do it; you'll need to tweak the numbers to make it work as you plan.
var $window = $(window);
var $box = $("#box");
$window.scroll(function() {
var scrollTop = $window.scrollTop();
if (scrollTop >= 250 && scrollTop < 400) {
$box.css({top: -250 + scrollTop});
} else if(scrollTop >= 400 && scrollTop < 600) {
$box.css({left: (50+(scrollTop-400)/2)+"%"})
}
});
If your project has numerous elements like this, I'd recommend the ScrollMagic (http://janpaepke.github.io/ScrollMagic/) library.
As far as efficiency is concerned I'd recommend the following:
1) Cache the jQuery selectors (note $box variable). Otherwise, jQuery will have to query the DOM on every scroll event.
2) Cache scrollTop rather then querying it multiple times within the event callback.
3) Although left and top work, using the transform: translate() property is more efficient, especially on mobile devices. (https://developer.mozilla.org/en-US/docs/Web/CSS/transform). However, on most mobile devices, scroll events only fire at the completion of a scroll, not while a page is scrolling.

scroll speed with mousewheel jquery plugin

I want to imitate the Google+ header with the search bar. When you scroll down it goes to top:-60px and the second horizontal menu will be top:0 from top:60px and become the main top horizontal menu, while the one with top:-60px remains hidden until we scroll to top.
I managed to do this, but it only works when I scroll slowly (with trackpad, OSX, Chrome33). I researched and found out the scroll speed depends on the hardware (touchpad, mouse), the OS and even on the browser. I found mousewheel plugin, that aims to make the scrolling speed equal but I can't make it work.
Here is the js code: ( The delta divisions I got from here: https://stackoverflow.com/a/16696129 )
<script type="text/javascript">
gn_top_menu_featured = $('.gn-top-menu-featured'),
gn_top_menu = $('.gn-top-menu'),
hide_gn_top_menu_featured = 0,
gn_top_menu_position = 44;
$('body').on('mousewheel', function(event) {
if( event.deltaX >= 40 )
event.deltaX /= 40;
if( event.deltaY >= 40 )
event.deltaY /= 40;
var sy = $('body').scrollTop();
if ( sy >= hide_gn_top_menu_featured && sy <= gn_top_menu_position ) {
gn_top_menu_featured.css('top', -sy);
gn_top_menu.css('top', gn_top_menu_position-sy);
}
else {
// whatever
}
});
</script>
I really want to get this working properly, thank in advance. :)

Turns out i misunderstood your problem at first. Here's another attempt at solving this. I still might not be understanding you correctly, because I still don't need to control the mousewheel speed to make this work. Here's the updated fiddle.
I use the $(window).scroll event to check the $(window).scrollTop() value and change the css class of the div.
$(window).scroll(function(){
$("#nav").css("top", ($(window).scrollTop() < 60 ? (60 - $(window).scrollTop()) : 0) + 'px');
if ($(window).scrollTop() > 60) {
$("#nav").addClass('sub-60').text('WOOT!');
}
else {
$("#nav").removeClass('sub-60').text('MAIN NAV');
}
});

Use jQuery to detect when an element is near the bottom of the page

I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!

You can use the jQuery function height() at your calculations, like:
$(window).height();
$(this).height();
Specifically, if you want to detect if the top of the element is near to the bottom of the page, you can use this calc:
if ( $(this).offset().top > ($(window).scrollTop() + $(window).height() - 20) ) // True

Halcyon,
I am not sure what you want to fire but you can test the bottom of the page like this
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if( ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
Reason being is jQuery finds bottom of the page based upon its height
1 $(window).height(); // returns height of browser viewport
2 $(document).height(); // returns height of HTML document