We Keep Coding

Menu becomes a solid color upon scrolling? JS?

Hello I am trying to get it where once you begin to scroll down, the header fades into a solid color so that you can see it clearly down the page.
https://journeysendstudios.com/transformative-medical-landing-page/
Currently I have JS added to make the header move up over the social media upon scroll.
This is what I have so far:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("MenuShrink").style.top = "0px";
} else {
document.getElementById("MenuShrink").style.top = "30px";
}
}
Is there a simple way to add in the change background color within this code? ( sorry I am very unfamiliar with JS )
I was trying this out:
http://jsfiddle.net/634d6vgq/2/
But it wasn't quite working.
I am using wordpress/Divi just fyi.
Thank you!

I viewed your page and you can simply include those lines in your scrollFunction:
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("MenuShrink").style.top = "0px";
document.getElementById("MenuShrink").style.backgroundColor = "orange";
} else {
document.getElementById("MenuShrink").style.top = "30px";
document.getElementById("MenuShrink").style.backgroundColor = "rgba(255, 165, 0, 0)";
}
}
however this will not work because the .et_pb_section_1_tb_header.et_pb_section selector have the background-color attribute set to !important. You can add important statement but that is not recommended it is better to remove it from the CSS class. Note that the social media header will disappear when add the background color, you can fix this by add a z-index in both header.

Fade color of div to opacity as user scrolls down the window JAVASCRIPT

I have a header div with an id of "#box" that I have fixed at the top as my page so it stays there as you scroll down the page. What I currently have is as the user scrolls down, the background color of the header div changes from it's opaque state to 50% transparency using{ window.pageYOffset > 50 } and back to it's original transparency if the header is back at the top. So it basically goes from one solid state to another and I would like to find a way for it fade from its starting 50% transparency to its opaque state with a fade in effect using Javascript. Below I have the original code for my original scenario and below is my attempt to create the fade in effect but am totally stuck. It is not working at all;nothing happens. Would it easier using Jquery?
Original Scenario:
window.onscroll = scroll;
function scroll() {
var header=document.getElementById("header1");
console.log(window.pageYOffset);
if(window.pageYOffset > 50){
console.log("Change Opacity now");
document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 1.0)";
}
else{
document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 0.5)";
}
}
Fade-In Attempt:
window.onscroll = scroll;
function scroll() {
var header=document.getElementById("box");
console.log(window.pageYOffset);
if(window.pageYOffset > 0){
var color = [38, 28, 63].join(',') + ',',
transparency = 1,
element = this,
timeout = setInterval(function(){
if(transparency < 0){
element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')';
} else {
clearInterval(timeout);
}
}, 40);
});
}

If it does run and the color changes but doesn't transition, an easy way of achieving the transition is by adding the css attrib 'transition: background 1s;' to the header.
If its not that, could you please elaborate what's not working?
By that i mean, is the functioning not getting called? etc...

JS Move a Div by Scroll Location

I want to move a bootstrap "navbar" header off the page when the navbar's position on the page reaches 400px.
If you look at this jsfiddle, I want the .navbar to leave the top of the page when the blue block begins (at 400px). The navbar would stay on the page through the red div, then leave the top of the page when the blue block begins.
I have tried to do this with scrollorama (jquery plugin), but have not had success yet:
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});
I am looking for either a pure javascript solution, or with the scrollorama plugin. Thanks for any ideas!

I'm not very familiar with the scrollorama plugin but you can get this done simply with jQuery via the scroll() event:
$(window).scroll(function () {
var winTop = $(this).scrollTop();
var redHeight = $('#red').height();
if (winTop >= redHeight) {
/*if the scroll reaches the bottom of the red <div> make set '#move' element
position to absolute so it will move up with the red <div> */
$('#move').css({
'position': 'absolute',
'bottom': '0px',
'top': 'auto'
});
} else {
//else revert '#move' position back to fixed
$('#move').css({
'position': 'fixed',
'bottom': 'auto',
'top': '0px'
});
}
});
See this updated jsfiddle: jsfiddle.net/52VtD/1945/
Edit: make it so that the navbar disappears at the same point that the red div ends
I noticed that earlier as well but I'm having trouble locating the problem so I removed your imported style sheet and created a basic style for the navbar. To get the navbar disappears at the same point that the red div ends you need to subtract the navbar's height to the condition:
if (winTop >= redHeight - $('#move').height()) {
I've also restructured the markup to get this working properly. I've nested the navbar inside the red div and set the red div's position to relative.
See this jsfiddle: jsfiddle.net/52VtD/1981/

listen to the scroll event using jquery to find if the navbar overlaps with the red or blue div
Assign a class to the red div
<div class="redDiv" style="height:400px; background-color: red;">
Then listen to the scroll event and use the getBoundingClientRect() to find the co-ord of the navbar and the div in the view port to check for overlap
$(document).scroll(function(event)
{
var rect1 = $('.navbar').get(0).getBoundingClientRect();
var rect2 = $('.redDiv').get(0).getBoundingClientRect();
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if(!overlap)
{
if ( $(".navbar").is(":visible") ) {
$('.navbar').hide();
}
}
else
{
if ( !$(".navbar").is(":visible") ) {
$('.navbar').show();
}
}
});
Here is a working fiddle
http://jsfiddle.net/SXzf7/

Sticky sidebar issue with Javascript

I am trying to implement a sticky sidebar that always sits at the top of the window as the user scrolls down the page.
I have it sticking to the top at the correct time, but for some reason it no longer floats left... will anybody please let me know what I can do to get it to stay in the same position when sticking?
My site is here. Thanks in advance!
<script type="text/javascript">
$(function(){ // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sticky').css( { position:'fixed', top: 0, marginLeft: "30px" } );
}
else {
$('.sticky').css('position','static');
}
});
}
});
</script>

Don't invent the wheel. Just get something like this plug-in and enjoy.

You don't seem to be telling it to be at the left side of the screen.
Try changing this line to:
$('.sticky').css( { position:'fixed', top: 0, left:0, marginLeft: "30px" }

Fading Element on Scroll

I'm curious how I can create a DIV (or anything really) that I can fade (or change opacity of) when a user scrolls down the page. This DIV would sit at the top of the page, but only be clearly visible when at the very top of the page.
Additionally, it would be ideal if I I could have this element fade back in onmouseover, regardless of the current scrolled position on the page.

jQuery would allow for a succinct solution, whilst hiding most browser discrepancies. Here's a quick mock-up to get you started:
<script type="text/javascript">
//when the DOM has loaded
$(document).ready(function() {
//attach some code to the scroll event of the window object
//or whatever element(s) see http://docs.jquery.com/Selectors
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $('body').scrollTop();
var opacity = 1;
// do some math here, by placing some condition or formula
if(scrollTop > 400) {
opacity = 0.5;
}
//set the opacity of div id="someDivId"
$('#someDivId').css('opacity', opacity);
});
});
</script>
See also:
jQuery
Selectors
CSS
Events/Scroll
CSS/ScrollTop
CSS/ScrollLeft

I thought I would give it a go using the actual value of scrollTop to dictate the opacity level, thus getting a smooth fade. I also added the hover state for the second part. Thanks to David for refining the maths for me.
//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
var height = $("body").height();
var scrollTop = $("body").scrollTop();
var opacity = 1;
if(scrollTop < 41)
{opacity = 1-Math.floor(scrollTop)/100;}
else
{opacity = 0.6;}
$("#header").css("opacity", opacity);
$("#header").hover(function(){
$(this).css("opacity", 1);
},function(){
$(this).css("opacity", 0.6);
});
});

Use scroll event, and analyse value of document.documentElement.scrollTop to set appropriated opacity.
http://www.quirksmode.org/dom/events/scroll.html