We Keep Coding

How to prevent hard jumping and what is alternative to position: sticky?

Two questions:
Focus on the part of 'Get early access' bar. It is positioned with position:relative and I want to have it sticky once you move to the 2nd section. I've tried to add helper with the same height in order to get smooth transition when I change the .class to fixed. But not working.
This with helper in previous websites helped me but now it doesn't work and it really bothers me.
What would be alternative to position sticky which works in all browsers? In this particular case, how needs jquery to look like?
Thanks in advance.
/**
* Zirelco
* Custom JS functions
*/
jQuery(document).ready(function ( $ ) {
var mn = $("#sticky-wrapper");
mns = "nav--scrolled";
hdr = $("#top-wrapper-v1").height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
$('.cookies .btn').on('click', function() {
if ($('.cookies').css('opacity') == 0) {
$('.cookies').css('opacity', 1);
}
else {
$('.cookies').addClass('none');
}
});
});

Edit V3
Try this Code instead of yours:
(function(selector) {
selector = selector || '#sticky-wrapper';
var stickyWrapper = document.querySelector(selector)
var stickyTrigger = document.createElement('div')
stickyTrigger.classList.add('sticky-trigger')
stickyWrapper.parentElement.insertBefore(stickyTrigger, stickyWrapper)
var listener = function (e) {
if (stickyTrigger.getBoundingClientRect().top < 0) {
stickyWrapper.classList.add('sticky');
} else {
stickyWrapper.classList.remove('sticky');
}
}
var onScroll = document.addEventListener('scroll', listener);
}('#sticky-wrapper'))
What this does is:
create a .sticky-trigger element
insert this right before #sticky-wrapper
watch for scroll event of document
check the top property of getBoundingClientRect of the .sticky-trigger element
toggle the sticky class of #sticky-wrapper depending on the sign (positive or negative) of that top value
You don't have to change your HTML output at all
Old V1
You use the height of the #top-wrapper-v1 <section> as trigger for the class toggle. But you totally forget the to calc the <header> height as well.
To prevent such mistakes just go for the top edge of the '#sticky-wrapper' as a trigger
// $(window).scroll(function(e) {
// if( $(this).scrollTop() > mn.offset().top ) {
// mn.addClass('sticky');
// } else {
// mn.removeClass('sticky');
// }
//});
Old V2
Because of the comment of the asker, this is an improved way of doing it.
In the previous example, the measurement of the offset().top of #sticky-wrapper is immediately set to 0 caused by position: fixed. In order to break this issue, we wrap the #sticky-wrapper in a trigger element, measure the offset().top of that element as trigger. This trigger element will remain in the document flow and will not be fixed
HTML
<!--
<section id="sticky-trigger">
<section id="sticky-wrapper" class="">
<div class="container" style="position: fixed;top: 0;">
Other content
</div>
</section>
</section>
-->
JavaScript
// var trigger = document.querySelector('#sticky-trigger')
// $(window).scroll(function(e) {
//
// if( $(this).scrollTop() > trigger.offset().top ) {
// mn.addClass('sticky');
// } else {
// mn.removeClass('sticky');
// }
// });

can't change z index with javascript

I'm trying to change the Z index of an image according to the scroll position,currently in chrome (but it should be working on all broswers).
anyway, it's not working on chrome, unless I get into inspection mode and I don't understand why it's only working in inspection mode?
this is the script:
$( window ).scroll(function() {
var scrollTop = $(window).scrollTop();
if ($(this).scrollTop()>700) {
document.getElementById("back-ground-image").style.zIndex = "-9";
console.log("-9");
} else {
document.getElementById("back-ground-image").style.zIndex = "-19";
console.log("-19");
}
});

Problem
What you need is $(document) not $(window).
By default, you scroll the $(document), not the $(window).
However, when you open your Chrome DevTools, the $(window) is not being scrolled which is why your code works.
To fix the issue, change $(window).scroll() to $(document).scroll() and $(window).scrollTop() to $(document).scrollTop()
Improvements
1. Use jQuery functions
Also, if you're already using jQuery, why not use jQuery selectors and .css():
$("#back-ground-image").css('zIndex', '-9')
instead of
document.getElementById("back-ground-image").style.zIndex = "-9";
2. Use DRY code
(Don't Repeat Yourself)
If you follow recommendation #1, why not set $("#back-ground-image") to a variable instead of repeating it twice.
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
$bkImg = $("#back-ground-image");
if ($(this).scrollTop() > 700) {
$bkImg.css('zIndex', '-9');
console.log("-9");
} else {
$bkImg.css('zIndex', '-19');
console.log("-19");
}
});
Otherwise, you could use:
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
background = document.getElementById("back-ground-image");
if ($(this).scrollTop()>700) {
background.style.zIndex = "-9";
console.log("-9");
} else {
background.style.zIndex = "-19";
console.log("-19");
}
});

Pure js add and remove (toggle) class after scrolling x amount?

I don't want to use jQuery for this.
It's really simple, I just want to add a class after scrolling past a certain amount of pixels (lets say 10px) and remove it if we ever go back to the top 10 pixels.
My best attempt was:
var scrollpos = window.pageYOffset;
var header = document.getElementById("header");
function add_class_on_scroll() {
header.classList.add("fade-in");
}
function remove_class_on_scroll() {
header.classList.remove("fade-in");
}
window.addEventListener('scroll', function(){
if(scrollpos > 10){
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
console.log(scrollpos);
});
But console shows a number that continues to grow regardless of scrolling up or down. And the class fade-in never gets added, though console shows we past 10.

You forgot to change the offset value in the scroll handler.
//use window.scrollY
var scrollpos = window.scrollY;
var header = document.getElementById("header");
function add_class_on_scroll() {
header.classList.add("fade-in");
}
function remove_class_on_scroll() {
header.classList.remove("fade-in");
}
window.addEventListener('scroll', function(){
//Here you forgot to update the value
scrollpos = window.scrollY;
if(scrollpos > 10){
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
console.log(scrollpos);
});
Now you code works properly
Explanation
There is no documentation for that, like you asked for. This is just an issue in the logic workflow.
When you say that scrollpos = window.scrollY your page is at an top-offset of 0, so your variable stores that value.
When the page scrolls, your scroll listener will fires. When yout listener checks for the scrollpos value, the value is still 0, of course.
But if, at every scroll handler, you update the scrollpos value, now you can have a dynamic value.
Another option is you to create a getter, like
var scrollpos = function(){return window.scrollY};
This way you can dynamically check what that method will return for you at every offset.
if(scrollpos() > 10)
See? Hope that helped. (:

One simple way to achieve what you want (one line of code inside the scroll event):
window.addEventListener('scroll', function(e) {
document.getElementById('header').classList[e.pageY > 10 ? 'add' : 'remove']('fade-in');
});
#header {
height: 600px;
}
.fade-in {
background-color: orange;
}
<div id='header'></div>

just use the method toggle in classList
header.classList.toggle('fade-in')

Get divs within viewport inside a wrapper div

Is there a way to get elements which is:
Inside a div with overflow: scroll
Is in viewport
Just like the following picture, where active div (5,6,7,8,9) is orange, and the others is green (1-4 and >10) :
I just want the mousewheel event to add "active" class to div 5,6,7,8,9 (currently in viewport). View my JSFiddle
$('.wrapper').bind('mousewheel', function (e) {
//addClass 'active' here
});

You could do something like this. I would have re-factored it, but only to show the concept.
Firstly I would attach this to scroll event and not mousewheel. There are those among us that likes to use keyboard for scrolling, and you also have the case of dragging the scrollbar. ;) You also have the case of touch devices.
Note that with this I have set overflow:auto; on wrapper, thus no bottom scroll-bar.
With bottom scrollbar you would either have to live with it becoming tagged as in-view a tad to early, or tumble into the world of doing a cross-browser calculating of IE's clientHeight. But the code should hopefully be OK as a starter.
»»Fiddle««
function isView(wrp, elm)
{
var wrpH = $(wrp).height(),
elmH = $(elm).height(),
elmT = $(elm).offset().top;
return elmT >= 0 &&
elmT + elmH < wrpH;
}
$('.wrapper').bind('scroll', function (e) {
$('div.box').each(function(i, e) {
if (isView(".wrapper", this)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
Note that you should likely refactor in such a way that .wrapper height is only retrieved once per invocation, or if it is static, at page load etc.
Update; a modified version of isView(). Taking position of container into account. This time looking at dolphins in the pool.
»»Fiddle««
function isView(pool, dolphin) {
var poolT = pool.offset().top,
poolH = pool.height(),
dolpH = dolphin.height(),
dolpT = dolphin.offset().top - poolT;
return dolpT >= 0 && dolpT + dolpH <= poolH;
}

jQuery callback functions

I have a function - vertToggle() - that toggles an element to slide up and down off the screen. I want to create a chain of events that slides the element off screen, changes the content within it, then slides it back up. However they need to be fired one after the other, not at the same time so they need to be setup as callbacks to one another.
The current, non-working, setup is:
vertToggle( '-' );
$(".content").hide()
$("#"+load).show();
vertToggle( '+' );
However I don't have my head around the necessary callback function syntax to make these trigger correctly, ie perform vertToggle(), when complete do the hide/show inbetween, then when these are done perform the second vertToggle().
Thanks for any pointers.
EDIT: as requested this is the vertToggle function, not sure if it's relevant.. $overlay is the element that is being animated:
function vertToggle( offset ) {
var height = $overlay.outerHeight();
var props = {};
var distance = ( offset == '-' ) ? height : 0 ;
props["bottom"] = offset+distance+'px';
if( !Modernizr.csstransitions ) {
$overlay.animate(props, 750);
$overlay.toggleClass("open");
}
else {
$overlay.css(props);
$overlay.toggleClass("open");
}
}

If you use .slideToggle(), you can add a function as a callback.
$("something").click(function(){
$("somethingelse").slideToggle(function(){
CallbackFunction()
})
});
Does that help?