Develop Reference

Change different header styles at different scroll positions

I am trying to make a header for a website where the header changes to different colors at different positions on the page.
Trying to get blue color background for header if the page is scrolled down with less than 40 pixels. And then red color background for header if the page is scrolled down between 40 pixels and 100 pixels. And then when the page is moved completely up, the header background is a yellow color.
Edit 1:
In short, Trying to make a sticky header change colors at different positions of the scroll on a page.
Edit 2:
Tried a new way of putting conditions. Updated the below code with latest working sticky header.
My problem is, when the header goes to the top position, it doesn't change back to orange color
So far I have got this code.
JS Fiddle
jQuery(document).ready(function($){
var mywindow = $(window);
var transoffset = $('#stickyheaders').offset().top;
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
if(mywindow.scrollTop() < 155) {
$('#stickyheaders').addClass('headertranspup');
} else {
//$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').addClass('headerstyleup');
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
background: orange;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
background: orange !important;
//transform: translateY(-110px);
//adjust this value to the height of your header
}
.headerstyleup{
background-color: blue !important;
}
.headertranspup{
background-color: red !important;
}
.headertranpup{
background-color: yellow !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>

The easiest solution for a problem like this is by assigning background-colour to the header directly in the element property using jquery rather than adding a new class with the same css property like background-colour in this case.
jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
//$('#stickyheaders').addClass('headertranpup');
$('#stickyheaders').css("background-color","orange");
}
else
{
if(mywindow.scrollTop() < 75) {
$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').css("background-color","transparent");
}
else
{
$('#stickyheaders').css("background-color","blue");
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
adjust this value to the heigt of your header*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>

how to change the color of the navbar after scrolling

I want my navbar to be transparent, but when the user scrolls a bit I want it to change to a solid color and I am using bootstrap for the navbar, I have done the code that is needed with javascript.
I had this javascript in my HTML file, but it doesn't seems to work and I don't really know why
<script>
var myNav = document.getElementById("mynav");
window.onscroll = function() {
use strict";
if (document.body.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
</script>
and I have also added the CSS code.
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
I don't know why it doesn't work, it is not displaying any errors, I have also manually put the class and it worked so the problem is from the js code and not the CSS.

Use scrollY property of Window object.
See the Snippet below:
var myNav = document.getElementById("mynav");
window.onscroll = function() {
if (window.scrollY >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
.main-container{
height: 1000px;
}
#mynav{
position: fixed;
background-color: gray;
height: 50px;
margin:0 auto;
top: 0;
bottom:0;
line-height: 50px;
padding:5px;
width: 100%;
}
<div class="main-container">
<div class="mynav" id="mynav">
Hello World! this is mynav
</div>
</div>

Try using window.scrollY instead of document.body.scrollTop.
if (window.scrollY >= 100)
You can also use document.documentElement.scrollTop. It's the html element that actually scrolls, not the body. Typically document.body.scrollTop will always be 0.

Transparent opening at bottom of fixed element on mobile scroll

It's hard for me to explain this, but I currently have a fixed item at the bottom of the page, and it disappears once the user scrolls to the bottom of the site, showing another div with a large amount of text. Once the user starts scrolling back to the top of the site, the fixed element re-appears at the bottom of the screen. The position of the fixed element is set to "bottom:0".
Unfortunately, sometimes, when the user scrolls up there is a transparent box about 20px in height below the fixed item. You can see the elements on the page that would appear underneath the fixed element, but the fixed element stays on top.
When I click on this blank space, the Google search bar appears. Is the Google search bar the thing that is causing the transparent box below the fixed element? What else could it be? This does not happen on Developer tools emulators, only on actual phones.
Here is an image below:
Here is my JS:
$(".mobile-isi-expand").click( function (){
var topMenuHeight = $('.mobile-top-menu').height();
var documentHeight = $('#pageContent').height();
var screenHeightSans = $(window).height();
console.log(topMenuHeight);
console.log(documentHeight);
var desiredExpandedHeight = topMenuHeight;
var desiredContractedHeight = "150px";
var deviceHeight = $(window).height();
var regionContent = $(".region-content").height();
if(documentHeight === null){
documentHeight = screenHeightSans;
}
else {
}
if($(this).hasClass("mobile-expanded")) {
$(this).removeClass("mobile-expanded");
$(".mobile-isi-container").animate({
"height":"150px",
"bottom":"0",
"top":deviceHeight - 150
});
}
else {
$(this).removeClass("mobile-isi-minimize");
$(".mobile-isi-expand").addClass("mobile-expanded");
$(".mobile-isi-container").animate({
"top":desiredExpandedHeight,
"height": documentHeight
});
}
});
$(function($) {
if(Modernizr.mq('(max-width: 480px)')) {
$(window).on('scroll', function() {
var is_root = location.pathname == "/";
var referenceHeight = $('.referenceArea').height();
var pageContentHeight = $("#pageContent").height();
var regionContent = $(".region-content").height();
var refAndPageHeight = referenceHeight + pageContentHeight;
if($(this).scrollTop() >= regionContent - 220) {
$('.mobile-hidden-isi').addClass("mobile-active");
$('.mobile-isi-container').css({"display":"none", "height": "150px"});
}
else {
$('.mobile-hidden-isi').removeClass("mobile-active");
$('.mobile-isi-container').css({"display":"block", "height": "150px", "bottom" : "0"});
var mobileISIheight = $('.mobile-isi-container').height();
console.log(mobileISIheight);
}
})
}
else {
}
});
CSS:
.mobile-isi-container {
position: fixed;
bottom: 0;
font-family: 'quicksandregular';
left: 0;
display: block;
background-color: #fff;
width: 100%;
height: 150px;
min-height: 150px;
z-index: 999999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow-y: scroll;
-webkit-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
-moz-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
}

this occurred due to the address bar appearing and disappearing. It changes the calculated window.height(). All I did was add an overflow-y: visible instea of overflow-y: scroll in my css, and added a background color. This covers up the transparent area, though it does make the height of the fixed element sort of variable.

Cycle Through Multiple Body Background Images

I'm new to development so please go easy on me. Everything I code is from scratch and my own.
I've began creating a body background image slider for one single page of my eCommerce platform and I'm a bit stuck on where to go next with it.
Please see here:
https://zoeyplayground-com.zoeysite.com/lookbook
Currently it is able to fade the body background when clicking the next and previous buttons, but I can't work out a way that this can be converted to handle more than one image per button. I will need the slider to be able to cycle through multiple body background images.
Please see the code below:
HTML
<!-- Remove header from lookbook page and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("body").addClass("background1");
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
}
});
</script>
<!-- Toggle background2 when 'next' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("background1");
jQuery("body").addClass("background2");
});
});
</script>
<!-- Toggle background1 when 'back' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("background2");
jQuery("body").addClass("background1");
});
});
</script>
<!-- Container and images -->
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>
CSS
/* Min-height due to hard-coded height issue */
.root-body {
min-height: 0 !important;
}
/* Transition for background image changes */
body {
transition: all 0.5s ease-out !important;
}
/* Hide footer on all pages */
.root-footer {
display: none;
}
/* Removeheader class for the lookbook page */
.removeheader {
display: none;
}
/* Body background options */
.background1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
Any advice or guidance on what I should do next is greatly appreciated. Thank you for your time.

try this:
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 2; // number of backgrounds it will work with any number
jQuery(".next").click(function() {
jQuery("body").removeClass("background" + current);
// next background index or first one if it's the last one
current++;
if (current > max_backgrounds) {
current = 1;
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
jQuery(".back").click(function() {
jQuery("body").removeClass("background" + current);
// previous background index or last one if current is the first one
current--;
if (current < 1) {
current = max_backgrounds
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
});

After resetting transition, div stays visible; no new transition

I'm trying to make a <div> display and then fade out, on button click.
This works so long as the user waits for the fade to complete between <button> presses.
My problem is, if the <button> is clicked while the fade is ongoing, the <div> needs to immediately reappear, and then fade out.
I've managed to get it to immediately reappear, but now it doesn't fade out again.
To get an easier idea of what I'm doing, take a look at the JSFiddle I've setup.
Can anyone help me get this to fade out if clicked whilst already fading out?
I'm only targeting webkit.
<div id="saved">Saved!</div>
<button id="save">Save</button>
function save()
{
// Little "Saved!" div
var div = document.getElementById('saved');
// If still showing from previous save
if(div.style.visibility === 'visible')
{
resetTransition();
div.style.visibility = 'visible';
//div.style.opacity = 0;
console.log('reset');
}
// On transition end
div.addEventListener('webkitTransitionEnd', resetTransition);
function resetTransition()
{
// Disable transitions
div.className = 'notransition';
// Hide the div and reset the opacity
div.style.visibility = 'hidden';
div.style.opacity = 1;
// Need time to let CSS changes (^) refresh
setTimeout(function()
{
// Re-enable transitions
div.className = '';
// Remove the event listener by way of cloning
var dolly = div.cloneNode(true);
div.parentNode.replaceChild(dolly, div);
}, 1);
}
// Show the div and fade out - on timer due to "if still showing" needing
// to process first
setTimeout(function()
{
div.style.visibility = 'visible';
div.style.opacity = 0;
}, 1);
}
document.getElementById('save').addEventListener('click', save);
div#saved
{
-webkit-transition: opacity 1.25s ease-out;
-webkit-transition-delay: 0.75s;
background-color: #FFC;
/* Courtesy of http://fatcow.com/free-icons */
background-image: url('http://i.imgur.com/JMlclKE.png');
background-position: 3px 4px;
background-repeat: no-repeat;
border: 1px solid #333;
border-radius: 6px;
left: 5px;
opacity: 1;
padding: 10px 4px 10px 52px;
position: absolute;
top: 5px;
visibility: hidden;
width: 68px;
}
.notransition
{
-webkit-transition: none !important;
-webkit-transition-delay: none !important;
}
button
{
position: absolute;
top: 100px;
}

I updated your fiddle, moving the cloning to the top and clearing the timeout.
// Little "Saved!" div
clearTimeout(save.t);
var dolly = document.getElementById('saved');
// Remove the event listener by way of cloning
var div = dolly.cloneNode(true);
dolly.parentNode.replaceChild(div, dolly);
/* etc til */
save.t = setTimeout(/* */);