We Keep Coding

How to animate 2 elements on scroll from side to center then back to side

I am trying to control the horizontal movement of 2 elements with scroll: one coming from left, the other from right and make them meet at the center (when they are in the center of the window), then make them return to their initial position as you continue to scroll.
And the reverse of this should happen when you scroll back to top. Also, I am trying to make this movement scale for any device.
This is what I tried:
https://jsfiddle.net/h8voaqm5/2/
<div class="scroll-image">
<img src="" class="circle from-left"/>
<img src="" class="circle from-right"/>
</div>
var total = $(window).height() - current;
// select elements
var eleRight = $(".from-right");
var eleLeft = $(".from-left");
// select their start position
var currPositionRight = eleRight.position().left;
var currPositionLeft = eleLeft.position().left;
var win = $(window).height()/2;
var trackLength = $(window).width()/2; // movement should be from 0 to 50 vw
$(window).scroll(function (event) {
var start = $(".circle").offset().top - $(window).height();
// start movement when img is in view
current = $(window).scrollTop();
var newPosition = trackLength * (current/total);
if (current > start) { // start anim
// go until half
if (current > start && current < (start+win)) {
eleLeft.css({left:currPositionLeft + newPosition+'px'});
eleRight.css({left:currPositionRight - newPosition+'px'});
} else {
// return in the second half
var newP = trackLength * (current/total)/10;
eleLeft.css({left:currPositionLeft - (newP)+'px'});
eleRight.css({left:currPositionRight + (newP)+'px'});
}
}
});
But I can't seem to grasp the Maths for returning the circles to their initial position.
Thanks in advance!

// var current = $(window).scrollTop();
// var total = $(window).height() - current;
// select elements
// var eleRight = $(".from-right");
// var eleLeft = $(".from-left");
// select their start position
// var currPositionRight = eleRight.position().left;
// var currPositionLeft = eleLeft.position().left;
// var win = $(window).height()/2;
// var trackLength = $(window).width()/2; // movement should be from 0 to 50 vw
// $(".scroll-image").click(function(){
// })
//
$(window).scroll(function(event) {
var x = $(".scroll-image").offset();
var imageDivscroll = x.top;
var Wheight = $(window).height() / 2;
if ($(window).scrollTop() >= imageDivscroll - Wheight) {
$('.scroll-image').addClass('animate');
} else {
$('.scroll-image').removeClass('animate');
}
// var start = $(".circle").offset().top - $(window).height();
// start movement when img is in view
// current = $(window).scrollTop();
// var newPosition = trackLength * (current/total);
// if (current > start) { // start anim
// go until half
// if (current > start && current < (start+win)) {
// eleLeft.css({left:currPositionLeft + newPosition+'px'});
// eleRight.css({left:currPositionRight - newPosition+'px'});
// } else {
// return in the second half
// var newP = trackLength * (current/total)/10;
// eleLeft.css({left:currPositionLeft - (newP)+'px'});
// eleRight.css({left:currPositionRight + (newP)+'px'});
// }
// }
// });
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
}
.section {
padding: 4em;
background: rgb(50, 50, 50);
min-height: 50vh;
color: white;
text-align: center;
}
.section:nth-child(even) {
background: tomato;
}
.scroll-image {
background: rgb(40, 40, 40);
min-height: 50vh;
height: 50vh;
display: flex;
vertical-align: middle;
align-items: center;
position: relative;
}
.circle {
max-width: 25vw;
max-height: 25vh;
position: absolute;
}
.from-right {
right: 0;
}
.from-left {
left: 0;
}
/* Animation key frame */
.scroll-image {
position: relative;
}
.scroll-image img:first-child {
position: absolute;
left: 0;
}
.scroll-image img:last-child {
position: absolute;
right: 0;
}
.scroll-image.animate img:first-child {
animation: leftSide 2s;
}
.scroll-image.animate img:last-child {
animation: rigthSide 2s;
}
#keyframes leftSide {
0% {
left: 0%;
}
50% {
left: 46%;
}
100% {
left: 0%;
}
}
#keyframes rigthSide {
0% {
right: 0%;
}
50% {
right: 46%;
}
100% {
right: 0%;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="section">
<h1>CONTENT</h1>
<p class="font-weight-normal pr-xl-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit.
Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin
eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
</div>
<div class="section">
<h1>CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit.
Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin
eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p>
</div>
<div class="scroll-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Purple_circle_100%25.svg/1024px-Purple_circle_100%25.svg.png" class="circle from-left" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Purple_circle_100%25.svg/1024px-Purple_circle_100%25.svg.png" class="circle from-right" />
</div>
<div class="section">
<h1>CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit.
Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin
eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p>
</div>
<div class="section">
<h1>CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit.
Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin
eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p>
</div>
</div>
it should be helpful for you

How to have dd(data definition) in jQuery automatically close when a user clicks on another dt (definition term)?

I am creating an accordion using the structure of dl, dt and dd. (Definition list). The logic is that if the user clicks on dt (definition term), the dd (data definition) will expand to display. In my style sheet, I have created a class style of (.open) which shows me an image using CSS Sprites.
My Codes look like this :
$("dd").hide();
$("dt").click(function(e) {
$(this).toggleClass("open").next().slideToggle();
}
The problem is that If I click on another dt, this existing dd should be able to collapse (toggle back) and the existing dt has to remove the class "open".
How is that possible?
Thanks!
James

So sorry that my question posted is not very clear. My codes are shown at the bottom.
$("document").ready(function(e) {
$("dd").hide();
$("dt").click(function(e) {
$(this).toggleClass("open").next().slideToggle();
});
});
dt {
color: #268bd2;
font-weight: bold;
cursor: pointer;
margin: 0 0 1em 0;
padding: 0 0 0 20px;
background: url(../_images/arrow-sprite.png) 0 0 no-repeat;
line-height: 16px;
}
dt:hover {
background-position: 0 -16px;
color: #2aa198;
}
dt.open {
background-position: 0 -32px;
}
dt.open:hover {
background-position: 0 -48px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<dl>
<dt><h3>How do I get notified?</h3></dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor vulputate luctus. Cras tincidunt turpis vitae neque placerat, vel imperdiet neque varius. Sed molestie gravida magna sit amet convallis. Cras vestibulum blandit imperdiet. Nam sagittis elementum lectus eget euismod. Morbi vel lacus dui. Aliquam hendrerit leo eu arcu tincidunt, a venenatis est tincidunt. Nunc quis lectus in massa aliquam aliquam et eget dui. Aenean efficitur maximus placerat. </p></dd>
<dt>
<h3>How do I use the Tour Vouchers?</h3></dt>
<dd><p>Nunc tincidunt imperdiet ligula, vitae auctor massa tristique ut. Sed vulputate, diam eu lacinia sodales, mauris magna egestas nunc, a ornare arcu purus non quam. Pellentesque et ex purus. Nulla sagittis urna ipsum, quis interdum augue tristique sit amet. Duis nec aliquam nisl. Nunc elementum hendrerit turpis dapibus bibendum. Fusce convallis leo sed porttitor euismod. Cras imperdiet lorem nec turpis cursus, quis lobortis augue tempus. Etiam tempor quis quam nec euismod. Maecenas et dictum diam, eget elementum tellus. Sed at sagittis massa. Nunc porttitor justo non nisl vulputate, vitae congue erat suscipit. Aliquam malesuada ultrices arcu at aliquet. Maecenas consectetur, quam a malesuada volutpat, urna augue fermentum neque, vel pharetra dolor tellus ut felis. </p></dd>
</dl>
</body>
So If I click on another dt, the existing dd should be able to collapse (toggle back) and the existing dt has to remove the class "open". Something like what you see for the accordion in jQuery UI.
I can't seem to wrap my head around ;(
Thanks for all your assistance!
Cheers!
James

$(".dt").click(function(e) {
$(".dt").removeClass("open");
$(this).toggleClass("open");
});
.open {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dt">div1</div>
<div class="dt">div2</div>
<div class="dt">div3</div>
This is simple but is that what you wanna do

Show first line in table row then expand or collapse on click and change + sign to - sign

This question is similar to How do you show just the first line of text of a div and expand on click? .
The answer provided by #thirtydot was http://jsfiddle.net/JUtcX/4/ .
My question is how to change + sign to - sign when the line expands, and change - sign to + sign when the line collapses.
$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});
.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a>[+]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

You may do it in many ways. This is one:
$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
$(this).find('.expand_sign, .collapse_sign').toggleClass('hidden');
});
.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a class="expand_sign">[+]</a><a class="collapse_sign hidden">[-]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

Like previously mentioned, there are a lot of different ways to do this.
You could use CSS:
.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden
}
.expand a {
width: 25px;
text-align: center;
display: inline-block;
}
.expand a:after {
content: '[+]';
}
.expand a.open:after {
content: '[-]';
}
.hidden {
display: none;
}
Then just add/remove the class:
$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
// Get the <a>, check if it has the open class
// if it does, remove it, if it doesn't, add it
var $sign = $(this).find('a');
if($sign.hasClass('open')){
$sign.removeClass('open');
}else{
$sign.addClass('open');
}
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});
With this answer though you'd remove the hard-coded [+] in your HTML.
Here is a working example.

jQuery - lock scrollbar and prevent page from jumping to the top?

I want to lock the scrollbar on window when the overlay is triggered which is working fine. But the problem is the body/ document jumps to the top when you scroll the page to the bottom/ middle and trigger the overlay.
I don't want the page to jump to the top. What I want to achieve is similar to Facebook's image overlay/ popup when you click on the image - it locks the background when you click on the image but it stays as it s when you exit the image popup. Is it possible?
CSS:
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: absolute;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
jQuery:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$("html").addClass('lock-scrollbar');
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$("html").removeClass('lock-scrollbar');
$('.overlay').hide();
return false;
});
});
HTML:
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
What have I done incorrectly?
My jsfiddle.

Well, I would lock the scroll in this way instead of using a fixed positioned lock-scrollbar:
$('html,body').css({'overflow-y': 'hidden'});
on the click of main and overflow-y back to auto:
$('html,body').css({'overflow-y': 'auto'});
when the overlay is hidden.
See demo below and updated fiddle here:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
$("#main").click(function() {
$('html,body').css({'overflow-y': 'hidden'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$('html,body').css({'overflow-y': 'auto'});
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
EDIT:
If you want to stick with the position: fixed solution - get / Set the value of scrollTop to reset the scroll.
Also added in $('html').css({'top':-scrollTop + 'px'}) while locking scroll - see demo below:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
var scrollTop = 0;
$("#main").click(function() {
scrollTop = $(window).scrollTop();
$("html").addClass('lock-scrollbar');
$('html').css({'top':-scrollTop + 'px'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$("html").removeClass('lock-scrollbar');
$(window).scrollTop(scrollTop);
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>

Try CSS:
html, body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
color: #000;
}
Try JS:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$('body').css({
overflow: 'hidden',
height: '100%'
});
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$('body').css({
overflow: 'auto',
height: 'auto'
});
$('.overlay').hide();
return false;
});
});
Your modified jsfiddle: https://jsfiddle.net/y9e1kt3q/
New fiddle (the scroll remains visible): https://jsfiddle.net/y9e1kt3q/1/

Change Element Style On Page Scroll

I want to change the visibility of an element after the user scrolls down 100px.
I have some code already,
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 100 ) {
if( !fixed ) {
fixed = true;
$('#logo-scroll').css({position:'fixed', display:'visible !important'});
}
} else {
if( fixed ) {
fixed = false;
$('#logo-scroll').css({display:'none'});
}
}
});​
JSFiddle.
The code has two problems.
It doesn't default to be invisible, I want it so it starts invisible.
It doesn't repeat, when the user scrolls back up, it doesn't go back being invisible.
More details,
I want to make something like this header, but, as you can see, there's a certain point where you see half of the small logo, and a PART of the bigger one. It doesn't affect techcrunch much as the header is small, but on my site, it does. I have made everything, I just need to start it in display:none, and become visible after 100px.

Use: display:block; and display:none;
jsFiddle DEMO
Add this to your CSS:
#logo-scroll{ display:none; position:fixed; }
jQ:
var $logo = $('#logo-scroll');
$(document).scroll(function() {
$logo.css({display: $(this).scrollTop()>100 ? "block":"none"});
});
BTW: on TC page it's just a CSS play with z-indexes. nothing more. all elements are visible at page load, it's just the scroll that makes appear a z-index lower element beneath the big logo.
In plain Javascript would be like this:
var win = window,
docEl = document.documentElement,
$logo = document.getElementById('logo-scroll');
win.onscroll = function(){
var sTop = (this.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
$logo.style.display = sTop > 100 ? "block":"none" ;
};

Well the question has already been answered. just adding a better example which might be useful for others and it's exactly what op wants.
code and demo
Edited: Added actual code from original source.
jQuery:
// This function will be executed when the user scrolls the page.
$(window).scroll(function(e) {
// Get the position of the location where the scroller starts.
var scroller_anchor = $(".scroller_anchor").offset().top;
// Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top
if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{ // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
$('.scroller').css({
'background': '#CCC',
'border': '1px solid #000',
'position': 'fixed',
'top': '0px'
});
// Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{ // If the user has scrolled back to the location above the scroller anchor place it back into the content.
// Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
$('.scroller_anchor').css('height', '0px');
// Change the CSS and put it back to its original position.
$('.scroller').css({
'background': '#FFF',
'border': '1px solid #CCC',
'position': 'relative'
});
}
});
HTML
<div class="container">
<div class="test_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum metus nec neque convallis id interdum nibh aliquet. Nulla eget varius diam. Ut ut dolor dolor. Mauris vehicula sodales mi quis euismod. In sem metus, volutpat nec fringilla sed, fermentum ac turpis. Cras aliquam venenatis rutrum. Donec pharetra ante sit amet justo pellentesque nec consequat ante elementum. Ut imperdiet iaculis tortor, id pretium urna pharetra sit amet. Aenean pharetra nunc risus, ac scelerisque urna. Morbi dictum egestas augue, in euismod metus commodo ac. Duis nisl ante, consequat et tincidunt id, eleifend eu ante. Integer lectus velit, tempus eu feugiat et, adipiscing ut mauris.
</div>
<!-- This div is used to indicate the original position of the scrollable fixed div. -->
<div class="scroller_anchor"></div>
<!-- This div will be displayed as fixed bar at the top of the page, when user scrolls -->
<div class="scroller">This is the scrollable bar</div>
<div class="test_content">
Quisque sollicitudin elit vitae diam consequat accumsan. Suspendisse potenti. Donec dapibus tortor at justo eleifend at pellentesque leo lobortis. Etiam ultrices leo et nulla iaculis eu facilisis augue fermentum. Pellentesque eu leo purus. Vestibulum bibendum, metus at bibendum blandit, lacus neque porttitor diam, id facilisis lectus mauris et leo. Donec adipiscing interdum lacus sed condimentum. In auctor sollicitudin orci, ac interdum risus aliquet ullamcorper. Curabitur mollis accumsan vulputate. Etiam adipiscing diam nec dui posuere ut tincidunt felis tristique. Vestibulum neque enim, placerat sed placerat commodo, consectetur ac mauris. Sed ultrices pretium nibh, a blandit libero imperdiet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
...
</div>
CSS:
.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;}
.scroller{background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}