We Keep Coding

How to achieve the same function of position:sticky using jQuery or JavaScript?

I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>

To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>

hide a div after certain percent of scrolling

I have a div which have two CTA buttons.I'm going to hide this div after reaching 90% of the page or reaching to my #footer div. The reason i'm doing this is to prevent it from interfering with footer.
I had found some codes but it will hide the div after 800px scroll not based on percentage .
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
Any idea?

hide this div after reaching 90% of the page:
You need to get 90% with Math.round($(document).height() * 90 / 100)
var height = Math.round($(document).height() * 90 / 100);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
or reaching to my #footer div
You need to use offset().top for getting element offset from window:
var height = Math.round($('#footer').offset().top);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
<div style="height:1000px;"></div>
<div id="footer"></div>

Here I have converted it in Percentage. Update PER value to update config.
//PER is Percentage value
var PER = 90;
var yInPixel, totalHeight;
//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).ready(function() {
totalHeight = $(this).height();
yInPixel = totalHeight * (PER / 100) - window.innerHeight;
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > yInPixel) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

Maintain object visibility on height increase

How to fix object visibility on height scroll.
I have the following code below which grows height of the div based on user scroll. When you scroll down the spider image become invisible.
$(window).scroll(function() {
var bh = 100;
var height = $(window).scrollTop();
var sch = bh + height;
$('.webscroll').stop().animate({
'height': sch
}, 400)
if (height <= 19) {
$('.webscroll').stop().animate({
'height': 200
}, 600)
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
A woking jsfiddle sample is here: https://jsfiddle.net/ppw9z6y2/

You can use css transitions for the animation, and just change the height by javascript:
.webscroll {
...
transition: height 50ms ease-in-out
}
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 50ms ease-in-out
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>
http://caniuse.com/#feat=css-transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
By looking your example, I think you want the spider to start moving after the scroll have ended, so if that's the case, check this: jQuery scroll() detect when user stops scrolling

Try moving the spider outside of its parent div and giving it a fixed position in the bottom corner; it should stay there regardless of scrolling. (You may need to tweak the behavior of the scroll/web line to look right.)

Same as hector22x. Increasing the duration to 100ms and add a 100ms delay to make it move smoothly.
var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
var bh = 100;
var height = window.scrollY;
var sch = bh + height;
if (height <= 19) {
$webscroll.style.height = '200px';
} else {
$webscroll.style.height = sch + 'px';
}
});
body {
background-color: #000;
height: 1200px;
}
.bottom_left_spider {
position: absolute;
width: 180px;
height: 200px;
left: 0;
top: 0;
z-index: 998
}
.webscroll {
height: 200px;
width: 1px;
border-right: 2px solid #2e2e2e;
position: absolute;
top: 0;
left: 101px;
z-index: 9999;
transition: height 100ms ease-in-out 100ms
}
.spidy {
position: absolute;
bottom: -51px;
left: -29px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
<img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
<!-- spider web lines -->
<div class="webscroll">
<!-- spider line vertical -->
<img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
<!-- spider image -->
</div>
</div>

How to rotate a chart 90 degrees including the text values?

I have the following progress bar, but I'd like it to go vertically instead of horizontally. In other words, I'd like to flip it 90 degrees and have the text flipped by 90 degrees as well
See my code below, as well as my code pen here:
http://codepen.io/chriscruz/pen/jPGMzW
How would I rotate this chart as well as the text value?
HTML
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="50">
<div class="progress-bar-state progress">50</div>
</div>
CSS
.progress {
width: 100%;
height: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
left: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
right: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
left: progressTotal
}, animationLength);
}

CSS
.progress {
height: 500px;
width: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
top: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
bottom: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').height();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
top: progressTotal
}, animationLength);
}
Pretty much its just switching the height and widths as well as the lefts with tops and rights with bottoms.

You can rotate text or anything else using this css rule.
transform: rotate(90deg); /* this is the rotation */
Use -90deg to rotate the other way.

lightbox with 2 different progress bar inside

I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}

You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.