We Keep Coding

Scroll duration when scrolled

I am using Jquery to create an effect that will change things as the user scrolls
$(function() {
var headerPosition = $(".home-header");
$(window)
.scroll(function() {
var scroll = $(window)
.scrollTop();
if (scroll >= 200) {
headerPosition.addClass("home-header-color");
} else if (scroll <= 600) {
headerPosition.removeClass("home-header-color");
}
});
});
This is what i'm using a simple add remove class function that gets triggered on a certain scroll amount.
What I want to do is to make it as a user scrolls once no matter how fast.
This is what I came up with but dose not work well scrolling up.
Codepen
I want it to only appear when you reach the top of the screen when scrolling up. Not on just one scroll up.
I tried combining the two but it didn't work out well.

Stop element from scrolling at the footer

So I'm trying to get this element to scroll which it does but I'd like it to stop scrolling before the footer.
At the moment I have this but the pages don't have the same length so the >= 17900 is not a good solution for me.
$(window).scroll(function (event) {
var windowTop = $(this).scrollTop();
if (windowTop >= 17900) {
$(".product-form__item--quantity").addClass("non-fixed");
$(".product-form__item--submit").addClass("non-fixed");
$("#ProductPhotoImg").addClass("non-fixed");
$("#option_total").addClass("non-fixed");
$(".product-single__title").addClass("non-fixed");
$(".product-form__item--quantity").removeClass("change");
$(".product-form__item--submit").removeClass("change");
$("#ProductPhotoImg").removeClass("change");
$("#option_total").removeClass("change-option");
$(".product-single__title").removeClass("change");
} else {
//console.log('a');
$(".product-form__item--quantity").removeClass("non-fixed");
$(".product-form__item--submit").removeClass("non-fixed");
$("#ProductPhotoImg").removeClass("non-fixed");
$("#option_total").removeClass("non-fixed");
$(".product-single__title").removeClass("non-fixed");
}
});
Thanks for the help

You have more issues than only finding the footer's position here...
First is to find the position of the footer instead of hardcoding a value.
Okay...
Second is that you constantly add and remove classes on scroll.
This sure isn't the desired effect.
The scroll event fires like a dozen times or more on a single mouse wheel spin.
Third is that you force jQuery to lookup for elements, as #Taplar mentionned in comments, each times the script executes (Which is real bad if the script execute constantly!!). This is bad... And unuseful, since this those elements don't change.
So I modified your script... Almost completely :
;)
// Define an element collection ONCE.
var elementsList = $(".product-form__item--quantity, .product-form__item--submit, #ProductPhotoImg, #option_total, .product-single__title");
// Find the footer's position.
var footerPosition = $("#footer").offset().top;
// Set a flag to prevent the the script action when already done.
var footerVisible = false;
$(window).scroll(function (event) {
// How many pixels scrolled + viewport height = position of the last pixel at the bottom of the viewport relative to the document's top.
var viewportBottom = $(this).scrollTop() + $( window ).height();
if (viewportBottom >= footerPosition) {
if(!footerVisible){
// Will update classes on the element in the elementslist collection on user scroll enought to show the footer in viewport.
elementsList.addClass("non-fixed").removeClass("change change-option");
// Set a flag
footerVisible = true;
}
} else {
if(footerVisible){
// Will update classes on the element in the elementslist collection on user scroll from a "visible footer" to a footer below the viewport.
// In other words, You don't want to do it CONSTANTLY except when the footer is visible and dissapears due to user scroll up.
elementsList.removeClass("non-fixed");
// reset the flag.
footerVisible = false;
}
}
});

Making an image appear after scrolling past header - attempts not working?

I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.

Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.

Sidebar move after user scrolls down x amount

Let's get straight to it: When the user scrolls x amount, I want the sidebar to begin to move.. Now, once the sidebar reaches its' end, I want it to stay fixed and scroll to the footer. Here's what I got.
http://jsfiddle.net/Ajp44/
Here's my Javascript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
For some reason JSfiddle isn't displaying what the Javascript is doing, but if you run it on your PC you can see. Whenever the user scrolls passed the ending of the sidebar, the sidebar doesn't scroll down with them like it is suppose to, instead, it jumps of to the right side of the page...
So my question is this: how do I stop the sidebar from jumping to the side of the page, and keep it within the restraints of the parent DIV?
Cheers!

Don't do right : 0 in your stick class. In fixed elements, the position attributes are relative to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

CSS dynamic Sticky footer required

I am trying to create an HTML form that is fixed to the bottom of the page. So when the user scrolls down, I want the input box to be fixed to the bottom.
But, when the user scrolls to a certain point (say 70% of the way down the page) I want the form to no longer be sticky, and to move up with the rest of the content.
Anyone got any ideas on how to do this using CSS/jQuery?

$(window).scrollTop() will give you the top position of your view port. You can combine this with the $(document).height() to calculate your % of height your are currently viewing. Based on that set the position to the sticky element
var height = $(document).height();
var topPos = $(window).scrollTop();
var perCentage = topPos/height;
if(perCentage > 0.7){
$('#sticky').css({'position','absolute','top':topPos});
}
else{
$('#sticky').css('position','fixed');
}