We Keep Coding

debounce/throttle is ruining my fixed-header effect

I have written some javaScript so that my menu starts off as position: static but will become position: fixed and stay at the top of the screen whenever the user scrolls upwards but will disappear again whenever scrolling downwards. Because the menu has some content above it, once the user has scrolled to the very top, the menu becomes position: static again.
This code works ok but I am having a problem when adding debounce. I've read I need either throttling or debounce for performance. I have tried using both the Lodash _.debounce and _.throttle functions separately. I don't mind having some delay on the menu showing itself on scroll-up, but with a debounce the header has a delay when returning to position: static once the user has scrolled back to the top of the page. I have tried using the {'leading': true} option for the debounce and throttle function but it hasn't done much good.
If I set my wait/delay time too low, surely there is no point in even using debounce or throttle anymore? I do not want to sacrifice the performance of the site but have been asked to implement this effect.
var header = document.getElementById("fixed-header");
var offset = header.offsetTop;
var $header = $(header);
var headerHeight = parseInt($header.css("height"));
var total = headerHeight + offset;
var lastScrollTop = 0;
window.addEventListener("scroll", _.debounce(scrollHeader, 200, {
'leading': true
}));
function scrollHeader() {
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// downscroll code
if (pageYOffset >= total) {
document.body.classList.add("fixed");
document.body.classList.add("is-hidden");
document.body.style.paddingTop = header.offsetHeight + "px";
header.style.transition = ".5s";
} else {
document.body.classList.remove("fixed");
document.body.classList.remove("is-hidden");
document.body.style.paddingTop = 0;
}
} else {
// upscroll code
if (pageYOffset >= offset) {
document.body.classList.add("fixed");
document.body.classList.remove("is-hidden");
document.body.style.paddingTop = header.offsetHeight + "px";
} else {
header.style.transition = "initial";
document.body.classList.remove("fixed");
document.body.style.paddingTop = 0;
}
}
lastScrollTop = st;
}

Fixed Element on scroll issue

So, I'm trying to reproduce the main scrolling effect on this beautiful portfolio: http://melaniedaveid.com/
I've followed this tutorial on Codyhouse: http://codyhouse.co/gem/fixed-background-effect/
And came up with the following Javascript function.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
contentright1 = document.getElementById('contentright1');
function checkScroll(id) {
var offset = scrollTop - $(id).offset().top;
if (offset >= 0 && offset < windowHeight) {
$(id).addClass('fixed_content');
if ((scrollTop/2) <= windowHeight) {
$(id).removeClass('fixed_content');
}
}
else {
$(id).removeClass('fixed_content');
}
};
checkScroll(contentright1);
The fidex_content class apply the following CSS:
.fixed_content {
position: fixed;
top:0; }
As you can see, my main problem is that I can't manage to remove this class when I go back to the position of the element in the first place.

Background-reacting navigation for one page websites - working script

Good morning!
I want to share with you a simple script I made for the purposes of my company new website. It allows you to make a floating navigation bar which smoothly changes its background.
For now it's working with jQuery. My question is - is it possible to made this in pure CSS? My previous idea was to make navigation container with overflow: hidden and position: absolute + menu with position: fixed. Everything worked well until I realized that Firefox can't handle with this combination.
I'm waiting for yours ideas :)
Here's the code and preview:
var nav = $('.nav'),
navHeight = nav.height();
// Duplicate navigation
var navReversed = nav
.clone(true)
.addClass('nav-reversed')
.insertAfter(nav);
var navs = $('.nav'),
slides = $('.slide');
/* ... */
// onScroll event
$(window).on('scroll resize', function() {
var scrollTop = $(document).scrollTop(),
slide;
// Find first visible slide
slides.each(function() {
if ($(this).offset().top > scrollTop)
return false;
slide = $(this);
});
if (slide.length) {
var id = '#' + slide.attr('id'),
slideNext = slide.next('.slide');
var clipTop = clipBottom = 'auto';
if (slide.hasClass('slide-reversed')) {
clipBottom = Math.max(slideNext.offset().top - scrollTop, 0);
}
else {
clipTop = navHeight;
if (slideNext.length && slideNext.hasClass('slide-reversed')) {
clipTop = Math.min(slideNext.offset().top - scrollTop, clipTop);
}
}
if (clipTop !== 'auto') {
clipTop = Math.round(clipTop) + 'px';
}
if (clipBottom !== 'auto') {
clipBottom = Math.round(clipBottom) + 'px';
}
navReversed.css('clip', 'rect('+clipTop+',auto,'+clipBottom+',auto)');
/* ... */
}
}).trigger('scroll');
Full version: http://jsfiddle.net/greenek/NL7Fh/

You can try checkbox hack http://css-tricks.com/the-checkbox-hack/, there are :target too but you can't higlight the link. http://codepen.io/anon/pen/lqvpA

Fixed sidebar on the scroll stop at div

I try to make sure that a div "filter" becomes fixed when scrolling and then stop when it comes down to "outside_footer_wrapper". use the following script but can not get it to work?
jsfiddle
$(function() {
var top = $('#filter').offset().top - parseFloat($('#filter').css('marginTop').replace(/auto/, 0));
var footTop = $('#outside_footer_wrapper').offset().top - parseFloat($('#outside_footer_wrapper').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#filter').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#filter').addClass('fixed').removeAttr('style');
} else {
$('#filter').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#filter').removeClass('fixed');
}
});
});

If you want to stop the position:fixed after you reach the footer you can do something like this faking with the top:
$(function() {
var top = $('#filter').offset().top,
footTop = $('#outside_footer_wrapper').offset().top,
maxY = footTop - $('#filter').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
$('#filter').addClass('fixed').removeAttr('style');
if (y > maxY-20){
var min = y - maxY + 20;
$('#filter').css('top','-'+min+'px');
}
} else {
$('#filter').removeClass('fixed');
}
});
});
Also take in care with the CSS for the class fixed you need to make that with equal specificity of #filter I made this change:
#sidebar #filter.fixed /*Add #sidebar*/
Check This Demo Fiddle

if you know at which pixel number the filter have to be fixed and at which pixel number the footer starts you can try this function:
scrollTop

Is it something like this?
jsfiddle
// get box div position
var box = document.getElementById('box').offsetTop;
window.onscroll = function(){
// get current scroll position
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById('scbox').innerText = scroll_top + ' ' + box;
// if current scroll position >= box div position then box position fixed
if(scroll_top >= box)
document.getElementById('box').style.position = 'fixed';
else
document.getElementById('box').style.position = 'relative';
}

try this:
#sidebar {
position: fixed;
}
jsfiddle here

How to make a div scroll when I scroll after certain point?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page. I know I've seen at least one example of this online but I cannot remember it for the life of me.
Any thoughts?

[Working demo]
var el = $("#sticky");
var win = $(window);
var width = el.width();
var height = el.height();
var win_height = $(window).height();
window.onscroll = function() {
var offset = el.offset().top + height - win_height;
if ( win.scrollTop() > offset ) {
window.onscroll = function() {
el.css({
width: width,
position: "absolute",
top: win.scrollTop() + win_height - height
});
};
}
};
If you don't need to support IE based browsers you can use:
position: "fixed"
bottom: 0