I want to fade out a Div in relation to The scroll When I Scroll Down the opacity fades out and when when I scroll up it fades back in
CSS:
.HeroImg{
margin-top: 100px;
height: 414px;
position: fixed;
width: 100%;}
#hero{
opacity: 1;
}
HTML:
<div class="HeroImg" id="Hero">
<h1>Exemple</h1>
<h2>Exemple</h2>
</div>
JavaScript:
<script>
var hero, yPos;
function yScroll() {
pagetop = document.getElementById('hero');
yPos = window.pageYOffset;
if (yPos > 150) {
hero.style.opacity = "0";
} else {
hero.style.opacity = "1";
}
};
</script>
and nothing happened
Can anyone here tell me Where's the problem ?
You have a few problems i fixed here http://jsfiddle.net/8c2dg7nj/1/
1- you were using an uninitialized variable hero, you were using the wrong name
hero = document.getElementById('hero');
instead of
pagetop = document.getElementById('hero');
2- Id is case sensetive so id="hero" not "Hero"
3-you were never calling your javascript function. I added a call on scroll
$(document).on('scroll', function(){
yScroll();
})
Related
I have a menu with 5 links, Each individual link has the same class and ID "navbarLink"
And I also have another div (which is a skewed shape) "#hoveredLink" that moves from 0 to the actual hovered link position (in the background) I want this shape to take the full width of the hovered link (since they're different on width since each one has more or less text). So My intention is to move this "#hoveredLink" horizontally to reach the position of the "navbarLink" actually hovered.
Haven't succeed yet!
window.onload = function() {
var bsDiv = document.getElementById("hoveredLink");
var x;
$("navbarLink").hover(function() {
x = document.getElementById("hoveredLink").left;
bsDiv.style.left = x + "px";
});
}
Can someone tell me what I'm doing wrong here?
Thanks!
It is this?
If it is not, put an example html.
var menu = document.getElementById("menu");
var up = document.getElementById("up");
menu.onmouseover = function(e){
if(e.target.nodeName != "SPAN"){ return; } // If everything is DIV, you can choose another condition to separate the children from the father.
up.style.left = e.target.offsetLeft - 10 + "px";
up.style.width = e.target.offsetWidth + 20 + "px";
};
menu.onmouseleave= function(e){ // Being the event in the parent is not lost between son and son
up.style.width = 0 + "px";
up.style.left = 0 + "px";
};
.content{
position: relative;
}
#up{
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 3px;
background-color: red;
transition: all 0.25s;
}
#menu > span{
margin: 10px;
}
<div class="content">
<div id="up"></div>
<div id="menu">
<span>Link 1</span>
<span>Link_Link 2</span>
<span>Link3</span>
<span>Link 4...</span>
<span>L5</span>
</div>
</div>
I am trying to make so that if you scroll down, a blurred picture appears (with opacity) and if you're at the bottom of the page, the blurred picture is fully visible and the old one disappeared. I'm using the same pagecontainer for every page and I want to make this script do this on every page, with different page lengths.
I have this so far:
CSS:
.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.blurred-img {
opacity: 0;
}
JS:
var divs = $('.social, .title'),
limit = 0;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
if (st <= limit) {
$('.blurred-img').css({ 'opacity' : (1 - st/limit) });
}
});
filter: blur usually works fine and looks better. How about something like this?
var img = document.getElementById("background-img");
var container = document.body;
var maxBlur = 20;
window.addEventListener("scroll", function(){
var position = container.scrollTop / (container.scrollHeight - window.innerHeight);
// Adjust the position for safari that may scroll higher or lower than the
// actual size during their "bounce effect".
position = Math.max(0, Math.min(1, position));
var blurAmount = position * maxBlur;
img.style["filter"] = "blur(" + blurAmount + "px)";
});
#background-img {
position: fixed;
}
#spacer {
width: 50px;
height: 2000px;
}
<img id="background-img" src="http://placehold.it/400x200?text=Background" />
<div id="spacer"></div>
If you really want to do your two images strategy, here is how I would do it.
var img = document.getElementById("blured-background-img");
var container = document.body;
window.addEventListener("scroll", function(){
var opacity = container.scrollTop / (container.scrollHeight - window.innerHeight);
// Adjust the opacity for safari that may scroll higher or lower than the
// actual size during their "bounce effect".
opacity = Math.max(0, Math.min(1, opacity));
img.style["opacity"] = opacity;
});
#background-img {
position: fixed;
}
#blured-background-img {
position: fixed;
opacity: 0;
}
#spacer {
width: 50px;
height: 2000px;
}
<img id="background-img" src="http://placehold.it/400x200/7A6DFF/D3CFFF?text=Bottom" />
<img id="blured-background-img" src="http://placehold.it/400x200?text=Top" />
<div id="spacer"></div>
I want to have a div filled with a background color and fixed dimensions ( width and height) appear on the screen wherever I click. However, if there are 10 div's on the screen, I want to stop being able to create a div when I click on the page and have a message (alert) tell me that "I'm done".
Thank you very much.
See the example below.
var numOfDivs = 0;
document.addEventListener("click", function (e) {
if (numOfDivs < 10) {
var d = document.createElement("DIV");
d.style.top = e.clientY + "px";
d.style.left = e.clientX + "px";
document.body.appendChild(d);
numOfDivs++;
} else {
alert("Done");
}
});
div {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
transform: translateX(-50%) translateY(-50%);
}
<html>
<body>
</body>
</html>
How can I make a div fixed /scroll within the confines of the parent element.
I have tried using various javascript functions to try and achieve this to no avail either they dont accommodate the height of the container/parent div or simply don't work-what I am trying to achieve is when the window scrolls to 60px above the red scrolling div(seen in image), it should become fixed(preferably retaining it's width) ntil it meets with the bottom of the parent/container div and then becomes position absolute within the relative parent div at "bottom:20px" the div is relatively positioned and cannot have a scroll bar and the red div has a height smaller than that of the parent div ... it is in fixed.Are there any javascript and/or css solutions to this problem?
here is something that I have tried
javascript:
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#one').followTo('#two');
html:
<body>
<div id="container" style="width:200px;">
<div id="one">FIXED...</div>
<div id="two">...BUT STOPS HERE</div>
</div>
</body>
css:
body, html{
height:200%;
}
#one {
width:100%;
height: 200px;
background-color: aqua;
position: fixed;
}
#two {
width: 100%;
height:50px;
background-color: red;
margin-top:150%;
position:absolute;
}
how do I find out if the user scrolled up to the top or down to the bottom in a scrollable container?
Does jQuery offer any mechanisms?
css:
#container {
display: block;
width: 250px;
height: 25px;
background: green;
}
#scrolling {
width: 250px;
height: 300px;
backround: red;
overflow: auto;
}
http://jsfiddle.net/Hmaf2/2/
Thanks a lot!
Pat
$('#somediv').scrollTop()
will tell you the position from the top
-edit-
$('#somediv').scroll(function(){
if($('#somediv').scrollTop()==0){
console.log('top')
}
})
Yes you can access the current scroll top value of a scrollable container.
Here working is jsFiddle.
$('#scrolling').scroll(function() {
var scrollTop = $(this).scrollTop();
console.log(scrollTop);
});
You can test the scroll position by comparing the height, scrollable height and scroll offset of the div:
$(document).ready(function(){
$('#scrolling').scroll(function(){
var scrollTop = $(this).scrollTop();
var iheight = $(this).innerHeight();
var sheight = this.scrollHeight;
var text = '';
if (scrollTop <= 5) {
text = 'top';
}
else if (scrollTop+5 >= sheight-iheight) {
text = 'bottom';
}
else {
text = scrollTop+' middle ('+iheight+','+sheight+')';
}
$('#result').text(text);
});
});
fiddle
This example has reserved 5 pixels from the top and bottom of the div's margin.