Develop Reference

Sticky div - stop scrolling at certain point

I have a fixed div that follows the page when it scrolls past the top of the page.
I would like it to stop scrolling once it reaches the bottom of a particular div. I am not great with javascript.
Basically needs to remove the class .affix. But it might need an offset so that it doesn't overlap into the layout below.
I have looked at other articles but the div starts off fixed whereas mine becomes fixed.
JSfiddle: https://jsfiddle.net/8t1ddL2h/
Javascript:
var stickySidebar = $('.sticky-sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sticky-sidebar').addClass('affix');
}
else {
$('.sticky-sidebar').removeClass('affix');
}
});
Any help would be appreciated
Lee

Try this Fiddle
$(document).ready(function() {
var $sticky = $('.sticky-sidebar');
var $stickyrStopper = $('.other-content');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});

You can also try it just add JavaScript. it will automatic calculate height of left panel. you need to change in css when it remove the css.
var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {
if ($(window).scrollTop() >= othercon-sliderheight) {
$('.sticky-sidebar').removeClass('affix');
// need to change here according to your need
}
});

How to find Multiple div reach top?

I have a survey page divided into sections. As the user scrolls, each section's header sticks to the top of the screen until the next section is reached. I was able to do it for the first and second section but I am not sure how to do it for the third one. There must be a better way to do this.
Here is my code and a jsfiddle
Thank you
var s = $("#block2 .question-title-block");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if ($(this).scrollTop() > 404) {
$('#block1 .question-title-block').addClass("sticky");
if (windowpos >= pos.top) {
$('#block2 .question-title-block').addClass("sticky");
$('#block1 .question-title-block').removeClass("sticky");
}
else{
$('#block2 .question-title-block').removeClass("sticky");
}
}
else{
$('#block1 .question-title-block').removeClass("sticky");
$('#block2 .question-title-block').removeClass("sticky");
}
})

If you want it to be applied to as many elements as you want, don't use them individually, use their class. Here is what you can do:
var titleBlocks = $(".question-title-block");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
titleBlocks.each(function(){
$(this).toggleClass('sticky', $(this).parent().offset().top <= windowpos);
});
});
JS Fiddle Demo

try this (allows for any number of question blocks):
var containers = $('.question-block-container');
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
containers.each(function () {
var container = $(this),
title = container.find('.question-title'),
contOffsetTop = container.offset().top,
conOffsetBottom = contOffsetTop + container.outerHeight() + 60; // 60 is margin bottom
if (windowpos >= contOffsetTop && windowpos <= conOffsetBottom) {
if (!title.hasClass("sticky")) {
title.addClass("sticky");
}
} else if (title.hasClass("sticky")) {
title.removeClass("sticky");
}
});
});
Example

if element offset top is at 10% of viewport

I would like to execute a function and detect when my element.offset().top is at more or less 10% of my viewport(window) when I scroll. How can I proceed?
I have this at the moment.
$(window).on('scroll', function() {
var wst = $(this).scrollTop();
var wh = $(this).height();
var elpos = wrapper.offset().top;
if (wst >= elpos) {
console.log('snoop doggy dog');
}
});
Thanks for the help.
Note: It's the element position top that needs to be at 10% of the window. not 10% of the document. Thanks.

I have written a different implementation for you which will help you accomplish your task. I explain the rest in snippet as comments.
$(window).on('scroll', function() { /* OnScroll */
/* Calculate if the scroll position is > 10% */
if($(document).scrollTop() > (0.1 * $(document).height())) {
console.log('Scroll Passed 10%');
} else {
/* Less than 10% */
}
});
Demo
Didn't got the question quiet well so deleted.

First I recommend setting a flag variable outside of the scroll function this way the action is called once when the statement is true.
var flag = true;
$(window).on('scroll', function() {
var wst = $(this).scrollTop();
var wh = $(this).height();
var elpos = wrapper.offset().top;
if (wst >= elpos*0.1 && flag) {
flag = false;
console.log("in")
tabs.first().addClass('active');
sections.first().find('figure').addClass('figureAnimateIn');
setTimeout(function(){
sections.first().find('.info').addClass('infoAnimateIn');
}, 300);
}
});

Change opacity of header DIV using YUI

Hey I have a div with "#header1" which I would like to keep at the top of the page as a user scrolls down. Now, I managed to get the div stick to the top upon scroll using "position:fixed" on "#header1" and what I would like to do now is change the opacity of the "#header1" once I scroll down and back to it's opaque state if i'm scrolled back up. I previously had posted my code but then learned we can use only YUI. Any advice would help. I am a total novice when it comes to YUI.
HTML:
<div id="header1">Hello</div>
CSS:
#header1 {
position: fixed;
top:0px;
z-index:1000;
margin:0;
padding:10px;
}
JS:
var target = $('div#header1');
var targetHeight = target.height();
var scrollRange = maxScroll/(target.length-1);
$(document).scroll(function(e){
var scrollY = $(window).scrollTop();
var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange;
var divIndex = Math.floor(scrollY/scrollRange);
target.has(':lt(' + divIndex + ')').css('opacity', 0);
target.eq(divIndex).css('opacity', scrollPercent);
target.has(':gt(' + divIndex + ')').css('opacity', 1);
});

You can try something like the following:
var notScrolled = true;
var headerTop = $('header').height(); // header size
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > headerTop && notScrolled) {
$('header').css('opacity',0.2);
notScrolled = false;
} else if (scrollTop < headerTop && !notScrolled){
$('header').css('opacity',1);
notScrolled = true;
}
});
Demo Fiddle

Improving performance of JavaScript transitions

I have a JavaScript-driven parallax slider, adapted from this tutorial (http://tympanus.net/codrops/2011/01/03/parallax-slider/), and a small script which fades the slider image out after scrolling past a certain point.
Here is the script:
$(document).ready(function() {
$(window).scroll(function () {
var $slider = $('.pxs_slider');
var sTop = $('body').scrollTop();
var sTop_ff = $('html').scrollTop();
var opacity = 1;
if(sTop < 40) {
opacity = 1;
if(sTop_ff < 40) {
opacity = 1;
} else {
opacity = 0;
}
} else {
opacity = 0;
}
$slider.css('opacity', opacity);
});
});
It all works fine, but scrolling becomes significantly sluggish during this transition. However, I've found it only really has this issue in Chrome of all browsers. There is no performance hit in Firefox.
Is there a more efficient approach to this effect I could try?

Cache $('.pxs_slider') so it's not queried every time the scrollbar moves is the big one:
$(document).ready(function() {
var $slider = $('.pxs_slider');
$(window).scroll(function() {
var sTop = $('body').scrollTop();
var sTop_ff = $('html').scrollTop();
var opacity = 1;
if(sTop < 40) {
opacity = 1;
if(sTop_ff < 40) {
opacity = 1;
} else {
opacity = 0;
}
} else {
opacity = 0;
}
$slider.css('opacity', opacity);
});
});
Also, $(window).scrollTop(), I believe, is the correct way:
$(document).ready(function() {
var $slider = $('.pxs_slider');
$(window).scroll(function() {
$slider.css('opacity', $(window).scrollTop() < 40 ? 1 : 0);
});
});