I am working on a website for a friend (https://www.nicoledavis.org) and have not been able to get the code right in order to make the top photo fade to black when scrolled. The idea is to have the entire top photo completely fade to black before the "Background Info" appears on the screen. Any help is much appreciated!
I used the exact code setup (copy/pasted) from here: https://jsfiddle.net/KCb5z/21 or see below:
jQuery:
$(function () {
$(window).scroll(function () {
var currentScrollTop = $(window).scrollTop();
$('#blackOverlay').css('opacity',
currentScrollTop/$('#blackOverlay').height());
});
});
CSS:
#blackOverlay {
background-color: #000;
opacity: 0.0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
HTML:
<div id="blackOverlay"></div>
The effect I'm seeing in the JSFiddle example is exactly what I'm hoping the website header does on the website I'm working on, but the code doesn't seem to have the same effect on my site. I'd also like for the speed of the fade effect to be increased, but have not yet been successful.
Is this what you're looking for?
<html>
<style>
.headerClass {
background: -webkit-linear-gradient(#000, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<h1 id="header">header</h1>
<script>
window.onscroll = function() {
fadeText()
};
function fadeText() {
if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
document.getElementById("header").classList.add("headerClass");
} else {
document.getElementById("header").classList.remove("headerClass");
}
}
</script>
</html>
You say you've tried some code, but it didn't work. May I take a look at it?
Related
First of all, I can only use vanilla javascript for the current project.
Run my codes below, there are 3 sections, I want to fix the second black section when it reached the top of the screen, but now the issue is if you use mouse wheel or touchpad scroll down the page, you will see the page is shaking.
I tried many ideas but can't fix this issue, hope anyone can give a solution or correct direction. Thanks!
window.addEventListener('wheel', function(e) {
var nextSection = document.querySelector('#next-section');
var fixedSection = document.querySelector('#fixed-section');
var doc = document.documentElement;
//When scroll down
if (doc.scrollTop >= nextSection.offsetTop - window.innerHeight) {
doc.scrollTop = nextSection.offsetTop - window.innerHeight;
}
});
.section {
width: 100%;
height: 400px;
line-height: 400px;
background: #ccc;
text-align: center;
padding-top: 20px;
}
#fixed-section {
background: #000;
color: #fff;
}
<div id="previous-section" class="section">Just scroll down</div>
<div id="fixed-section" class="section">Fix this section when it reached the top of the viewport.</div>
<div id="next-section" class="section"></div>
I'm looking to append divs from the bottom. At a certain point, the vertical scroll should kick in so you can view divs that were appended earlier on. I'm trying to replicate a typical chat application and how messages come from the bottom. Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
Before I put the code, I'll explain a couple of workarounds I've tried thus far. The pen currently has the container absolutely positioned with a bottom of 0. The problem, which is a pain, is that once the height goes beyond the height of the viewport, it won't scroll. This is the problem with the absolute positioning workaround.
Another workaround I've tried is doing a height of 100vh and display of flex with justify-content flex-end so the columns start at the bottom. The problem with this is that the scroll will always start from the top. I believe the solution is a scroll function that I've created to scroll to the bottom every time a new div is added. Would this be the best method? The key here is that I want to be able to scroll up to the older divs but have the newer divs start from the bottom. Think of a typical chat application like slack or messages or similar.
HTML
<button onclick="myFunction()">Hey here's a box</button>
<div id="container">
</div>
CSS
body {
margin: 0;
width: 100%;
}
button {
position: fixed;
z-index: 10;
}
#container {
position: absolute;
bottom: 0;
width: 100%;
}
#box {
width: 100%;
background: tomato;
opacity: 0;
height: 100px;
transition: .2s;
}
#box:last-child {
opacity: 1;
height: 0;
animation: .2s height linear forwards;
}
#keyframes height {
to {
height: 100px;
}
}
#box:nth-last-child(2) {
opacity: .8;
}
#box:nth-last-child(3) {
opacity: .6;
}
#box:nth-last-child(4) {
opacity: .4;
}
#box:nth-last-child(5) {
opacity: .2;
}
JS
function myFunction() {
var box = document.createElement("div");
box.setAttribute("id", "box");
var container = document.getElementById('container');
container.appendChild(box);
// window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}
Is there a better solution than the function I've created to scroll to the bottom? Much appreciated.
Ok, so after messing around with some JS, I figured it out. I love when that happens...
Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
I created a setInterval function for scrolling to the bottom.
var myVar = setInterval(function(){
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}, .1);
However, since this interval runs every .1 seconds, I need to kill it in order to scroll around the divs above (like old chat messages), but I want the animation (of the new div coming in) to finish. So, I created a setTimeout function to kill the setInterval function at 200 ms.
setTimeout(function(){
clearInterval(myVar);
}, 200);
In the following codes, the header color is transparent. I want to change its color to "#FFF" as I scroll down the page. Please guide me how I can write the relevant js code for it.
Also, could it be done by plain css?
div {
height: 1000px;
width: 100%;
}
#home {
background-color: red;
}
header {
background-color: transparent;
color: ffffff;
height: 100px;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
<header>Top Navigation</header>
<div id="home" class="sect"></div>
Pen Try this. It should help you. You should be doing it with either jquery or plain javascript
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 10) {
$('header').css('background-color','#FFF');
}
if ($(window).scrollTop() < 10) {
$('header').css('background-color','transparent');
}
});
});
Did you try with background-color:rgba(0,0,0,0); ?
I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)
If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.
This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much
you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}
As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>