Develop Reference

Show logo if site has scrolled

I have a header with a logo. This logo should appear only if the site has been scrolled.
I tried this in javascript:
if(document.getElementById("div").scrollTop != 0){
document.write("<img src='logo.jpg'>");
}
But this did not work.
How to achieve it?

Use window.addEventListener('scroll', callback) and then set the value "block" to the img's property.
window.addEventListener('scroll', function(e) {
if (document.getElementsByTagName("html")[0].scrollTop > 5) {
document.getElementsByClassName('imgHeader')[0].style.display = "block";
} else {
document.getElementsByClassName('imgHeader')[0].style.display = "none";
}
});
.imgHeader {
height: 100px;
width: 100px;
display: none;
}
div {
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
}
<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>

Try this one
$(document).on("scroll", function() {
if ($(document).scrollTop() > 5) {
$(".below-top-header").addClass("show-class");
} else {
$(".below-top-header").removeClass("show-class");
}
});
.content {
height: 500px;
}
.show-class {
position: fixed;
display: block !important;
}
.hide-class {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="below-top-header hide-class">
Image
</div>
</div>

Unfortunately, I think you must use some JavaScript to make it work like you want.
Here is an easy snippet to show the principle I used:
Start with the logo already in the html, but with display: none in its CSS,
Use window.addEventListener('scroll', callback) to change display: none to display: block when the page is scrolled down (i.e. document.documentElement.scrollTop > 0).
var logo = document.getElementById('logo');
window.addEventListener('scroll', function(e) {
if (document.documentElement.scrollTop > 0) {
logo.style.display = 'block';
}else logo.style.display = 'none';
});
#logo {
display: none;
position: fixed;
top: 0;
background: #aaa;
}
#page {
background: #ddd;
height: 2000px;
}
<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>
Hope it helps.

You need to add an scrollListener to the window in order to execute code when the user scrolls.
Your code only gets executed on page load.
Informations on Eventlisteners: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
window.addEventListener('scroll', function(e) {
//do something as soon as the window was scrolled
});
Be aware that the event will be triggered each time the user scrolls.

Nav Bar Scroll Function NOT Working

What I need to do to change the colour of my nav bar when I scroll down by a certain amount and reset when I scroll back up. I have tried many different techniques. AKA youtube videos on the subject. But cannot seem to get it to work! I have a 'scrolled' class in my CSS stylesheet with a background color set. But it won't even take my function.
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
});
Google Chrome Dev-Files

//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
THANKS SO MUCH!

Not sure what the outermost $(function() {... does, but I think that was the reason the snippet inside did not run.
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
If you intended to use IIFE, immediately invoked function expression, you can do
(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
}());
which also works.

This describes how to implement this in Vanilla JS, also taking care of performance using passive event listeners.
Codepen Links
let navRef = document.querySelector('nav');
document.addEventListener('scroll', () => {
if (window.scrollY > 500) {
navRef.classList.add('scrolled');
} else {
navRef.classList.remove('scrolled');
}
}, { passive: true })
body {
margin: 0;
}
div.container {
background: aliceblue;
height: 10000px;
}
nav {
height: 50px;
background: pink;
position: fixed;
width: 100vw;
transition: background 0.3s ease-in-out;
}
nav.scrolled {
background: #80deea;
}
<div class="container">
<nav></nav>
</div>

Remove an If Statement after it has been fired once

Is there anyway of removing an if statement after it has been fired once?
I have a menu container that shows on page load and want it so when the user scrolls 1px it slides away. I don't though want a the browser constantly tracking a scrollTop() method because of the performance hit from this.
What's the best way to remove or cancel an if statement after it has been used once?
The code is below and I have a codepen here: http://codepen.io/emilychews/pen/evbzMQ
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
}
});
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
});
});
body {
margin: 0;
padding: 0;
height: 200vh;
}
.menubox {
top: 100;
position: fixed;
width: 20%;
height: 100%;
background: red;
padding: 10px;
color: white;
transition: all 1s;
}
.mybutton {
position: fixed;
left: 40%;
top: 50px;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubox">Menu Box</div>
<button class="mybutton">menu</button>

Sounds like you actually have two conditions. One is based on the scroll position, the other is based on some state to be tracked. So just add a variable to track that state. Maybe something like:
var scrolled = false;
$(window).scroll(function() {
if ( !scrolled && $(document).scrollTop() > 1) { // check the state
$('.menubox').css('left', '-25%');
scrolled = true; // update the state
}
});
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
scrolled = false; // don't forget to reset the state
});

You can call off() within the if statement to remove the event handler.
Also note that if you're concerned about performance you can debounce the event handler so that it only executes the logic once scrolling stops for N ms:
var scrollTimer;
$(window).scroll(function() {
clearTimeout(scrollTimer)
scrollTimer = setTimeout(function() {
if ($(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
$(window).off('scroll');
}
}, 150);
});

vertical jquery accordion that will fill empty percentage when siblings collapse

Trying to get a jQuery vertical accordion working with 3 separate panels, A, B and C, each currently 33.3% wide. What I am trying to accomplish is when you collapse A, B & C will fill up the other 33% of that new available space from A being collapsed. If you close A & B then C would fill up 100% of the empty space. Any help is much appreciated as I am sure I may be approaching this the complete wrong way?
http://jsfiddle.net/Mvr3P/
HTML
<div id="toggle"><div id="toggle-button"></div></div>
<div id="toggle2"><div id="toggle-button2"></div></div>
<div id="toggle3"><div id="toggle-button3"></div></div>
CSS
#toggle {
float: left;
height: 200px;
width:33.3%;
background:red;
}
#toggle2 {
float: left;
height: 200px;
width:33.3%;
background:blue;
}
#toggle3 {
float: left;
height: 200px;
width:33.3%;
background:green;
}
#toggle-button {
height: 20px;
width: 100%;
background:blue;
}
#toggle-button2 {
height:20px;
width: 100%;
background: purple;
}
#toggle-button3 {
height:20px;
width: 100%;
background:orange;
}
JQUERY
$(document).ready( function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#toggle").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle').animate({ width: toggleWidth });
});
$('#toggle-button2').click( function() {
var toggleWidth = $("#toggle2").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle2').animate({ width: toggleWidth });
});
$('#toggle-button3').click( function() {
var toggleWidth = $("#toggle3").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle3').animate({ width: toggleWidth });
});
});

So there's a few tricky things going on here - the biggest challenge being how to animate more than one thing at a time.
JSFiddle of the solution here: http://jsfiddle.net/vYzpB/1/
Firstly, using classes to generically label your elements will allow you to write less code. This is a hugely important thing especially when you're applying the same behavior to more than one element. As you seem to know, you should only have one ID, but you can have many elements with the same class name.
<div class="accordion">
<div id="toggle" class="toggle-item"><div id="toggle-button" class="toggle-button"></div></div>
<div id="toggle2" class="toggle-item"><div id="toggle-button2" class="toggle-button"></div></div>
<div id="toggle3" class="toggle-item expanded"><div id="toggle-button3" class="toggle-button"></div></div>
</div>
Additionally, wrap all of the elements in a parent div (which I called accordion). I'll explain why shortly.
With that change, we can apply a click event to the .toggle-button class that handles the event for each of the accordion items:
$(document).ready( function(){
$('.toggle-button').click( function() {
// capture the parent div with the class of 'toggle-item'
var $parentToggle = $(this).parent('.toggle-item');
// run this within setTimeout so that both animations
// run at the same time. This is called "running asynchronously"
window.setTimeout(function() {
$('.toggle-item').not($parentToggle).animate({
width: '10%'
});
}, 0);
$parentToggle.animate({
width: '80%'
});
});
});
The window.setTimeout is the secret sauce here. Without it, jQuery will wait until the first animation is finished, THEN move on to the next. By wrapping the first animation inside a setTimeout we essentially remove it from the top-to-bottom execution process and call it asynchronously. We set this to timeout at "0" because we actually want it to run right away (as opposed to waiting a certain amount of milliseconds).
The CSS
The CSS has a "default state" .expanded class we add to the element intended to take up the 2/3 (or whatever % you want) space.
Notice also how that new parent div has a set width. Without it, the elements will flop around while transitioning.
.accordion {
width: 600px;
overflow: hidden;
}
.toggle-item {
float: left;
height: 200px;
width: 10%;
}
.expanded {
width: 80%;
}
#toggle {
background:red;
}
#toggle2 {
background:blue;
}
#toggle3 {
background:green;
}
.toggle-button {
height: 20px;
width: 100%;
}
#toggle-button {
background:blue;
}
#toggle-button2 {
background: purple;
}
#toggle-button3 {
background:orange;
}

Slide Element Up Into Page?

I was wondering how I could slide up a banner at the bottom of my page that is hidden.
For instance:
Page loads
3 seconds later, the banner slides up from bottom of page
I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.
I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/
Here's what I originally tried:
$(document).ready(function() {
$('.serverad').delay(3000).slideToggle('slow', function() {
// Animation complete.
});
});
And the CSS was visiblity: hidden;

use a position:fixed on the banner ad, and animate the bottom attribute to 0
have the initial bottom attribute be the a negative of its height.
<style>
.serverad
{
height:60px;
position:fixed;
left:0px;
bottom:-60px;
}
</style>
<script>
$(document).ready(function() {
$('.serverad').delay(3000).animate({bottom:"0px"},600);
});
</script>

I think you may want something along these lines:
HTML:
<body>
<div class="serveraddcontainer">
<div class="serveradd"></div>
</div>
</body>
CSS:
body{
overflow: hidden;
}
.serveraddcontainer{
width: 100%;
height: 80px;
position: absolute;
bottom: -80px;
}
.serveradd{
width: 400px;
height: 80px;
background-color: red;
margin: auto;
}
Javascript:
setTimeout(function(){
$('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);
Example JSFiddle Here

Animate the height property instead of top:
In you CSS:
.serverad {
...
height: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visiblity: visible;
overflow: hidden;
...
}
And in your JS, change the animation code to:
$(document).ready(function() {
$('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
// Animation complete.
});
});

Here's one approach:
var stepDurations = 3000;
var reveal = window.setTimeout(
function(){
$('#banner').animate(
{
'height' : '30px'
}, stepDurations,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDurations);
});
},stepDurations);
JS Fiddle demo.
Turned the above into a function:
function slideReveal(target, height, stepDuration, revealName){
if (!target) {
return false;
}
else {
var height = height || '30px',
stepDuration = stepDuration || 2000,
revealName = revealName || 'reveal';
revealName = window.setTimeout(
function(){
$(target).animate(
{
'height' : height
}, stepDuration,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDuration);
});
},stepDuration);
}
};
// call with:
slideReveal($('#banner'), '3em', 100, 'revelation');
JS Fiddle demo.