How can i change header on a div when scroll? - javascript

I'll create a black and white background website. I want the header to be replaced with translateY when the background is black. I want to change slowly in the transition area. How can i do that?
function headerEffect() {
var win = $(window).scrollTop();
var blackspace = $('.black').offset().top;
var headw = $('.logo-white');
var headb = $('.logo-black');
var where = window.pageYOffset || document.documentElement.scrollTop;
if (win > blackspace) {
headw.css({
'transform': 'translateY(' + (win - blackspace - 42) + 'px' + ')'
});
}
}
headerEffect();
$(window).scroll(headerEffect);
header {
position: fixed;
font-size: 30px;
font-weight: bold;
}
header .logo-white {
color: #fff;
}
header .logo-black {
color: #000;
}
.black {
background: #000;
height: 300px;
width: 100%;
}
.white {
background: #fff;
height: 300px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
<div class="logo-black">LOGO</div>
<div class="logo-white">LOGO</div>
</header>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
https://jsfiddle.net/br1fmhou/

I write console.log('123') to make sure that you are scroll in black div
function headerEffect() {
var win = $(window).scrollTop();
var blackspace = $('.black').offset().top;
var headw = $('.logo-white');
var headb = $('.logo-black');
var where = window.pageYOffset || document.documentElement.scrollTop;
$('.black').each(function() {
if (win >= ($(this).offset().top - 10) &&
win <= ($(this).offset().top + $(this).height())) {
console.log('123');
headw.css({
'transform': 'translateY('+( win - blackspace - 42) + 'px' +')'
});
}
})
}
https://jsfiddle.net/br1fmhou/2/

Related

ask for making divs draggable and not placed off the screen

I had a hard time coding, so I asked a question here.
If you press the button on the upper left, you can make the color boxes invisible. At the same time, I wrote down the code the the button can make the color boxes could be placed in a random location.
I would like to make sure that the color boxes do not go out of the screen. Even if the width and height were set to 100% on the body, the color box was placed off the screen.
And I want to correct the color boxes so that they can be moved by draggable function, but they don't work together. I would also like to ask for help with this.
and I am not a coding expert man so, I need a comment with coding example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {margin:0; padding:0;}
button {position: absolute; width: 30px; height: 30px; background: #edd6bc;}
.random {position: absolute; width: 30px; height: 30px;}
</style>
<script>
</script>
</head>
<body >
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random" ></div>
<div style="display: none; background: #c9656f;" class="random" ></div>
<div style="display: none; background: #f1eb40;" class="random" ></div>
<div style="display: none; background: #00825c;" class="random" ></div>
<div style="display: none; background: #009ce0;" class="random" ></div>
<div style="display: none; background: #cee4a6;" class="random" ></div>
<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
box.style.top = Math.floor((Math.random() * height) + 1) + "px";
box.style.right = Math.floor((Math.random() * width) + 1) + "px";
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
</script>
</body>
</html>
If you want an explanation tell me.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {margin:0; padding:0;}
button {position: absolute; width: 30px; height: 30px; background: #edd6bc;}
.random {position: absolute; width: 30px; height: 30px;}
</style>
<script>
</script>
</head>
<body >
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random"></div>
<div style="display: none; background: #c9656f;" class="random"></div>
<div style="display: none; background: #f1eb40;" class="random"></div>
<div style="display: none; background: #00825c;" class="random"></div>
<div style="display: none; background: #009ce0;" class="random"></div>
<div style="display: none; background: #cee4a6;" class="random"></div>
<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight - 30;
const width = document.documentElement.clientWidth - 30;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
box.style.top = Math.floor(Math.random() * height) + "px";
box.style.left = Math.floor(Math.random() * width) + "px";
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
function mouseDown(downEvent) {
var box = downEvent.srcElement;
var offX = box.getBoundingClientRect().left - downEvent.x;
var offY = box.getBoundingClientRect().top - downEvent.y;
document.onmousemove = e => {
box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
}
document.onmouseup = e => {
document.onmousemove = document.onmouseup = null;
}
return false;
}
Array.from(boxes).forEach(box => {
box.onmousedown = mouseDown;
})
</script>
</body>
</html>
While generating the top * right subtract the height and width of the div
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
const right = Math.floor(Math.random() * (width - 30) + 1) + "px";
box.style.top = top;
box.style.right = right;
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
body {
margin: 0;
padding: 0;
}
button {
position: relative;
width: 30px;
height: 30px;
background: #edd6bc;
}
.random {
position: absolute;
width: 30px;
height: 30px;
}
<button onclick="showhide()" value="Zeige Features" id="button"></button>
<div style="display: none; background: #6d97b4;" class="random"></div>
<div style="display: none; background: #c9656f;" class="random"></div>
<div style="display: none; background: #f1eb40;" class="random"></div>
<div style="display: none; background: #00825c;" class="random"></div>
<div style="display: none; background: #009ce0;" class="random"></div>
<div style="display: none; background: #cee4a6;" class="random"></div>

window scroll in not working with if else if

I'm using the scroll function, but the code in my else if blocks do not appear to be executing.
I'm trying to hide one div and show another, once the user scrolls past a certain point.
Here's my code - what am I doing wrong?
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + (showOneHeight - 50);
var offSetValue2 = scrolTop + (showTwoHeight2 - 50);
var offSetValue3 = scrolTop + (showThreeHeight3 - 50);
var offSetValue4 = scrolTop + (showFourHeight4 - 50);
// alert(offSetValue3)
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
});
body {
margin: 0px;
}
.contentArea {
display: flex;
height: 100vh;
}
.boxes {
width: 50%;
}
.pinned {
background: rgb(72, 91, 35);
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 20px;
text-transform: capitalize;
font-family: system-ui;
color: #fff;
}
.content {
position: relative;
}
.box {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.showOne {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div style="height: 500px; background: violet;"></div>
<div style="height: 500px; background:yellowgreen;"></div>
<div class="contentArea">
<div class="pinned boxes">
<h1>i am pinned side</h1>
</div>
<div class="content boxes">
<div class="box showOne">
<strong>paragraph one</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showTwo">
<strong>paragraph two</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showThree">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showFour">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
</div>
</div>
<div class="test" style="height: 500px; background: rgb(39, 96, 106);"></div>
<div style="height: 500px; background: rgb(46, 35, 46);"></div>
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
The problem is the else if conditions. The else if is not executed because the first condition is ever true when the second and third is true.
You need to specify the range beetween heights are really true:
if ( (height > offSetValue) && (height < offSetValue2)) {
//exec
}
else if ( (height > offSetValue2) && (height < offSetValue3)) {
//exec
}
else if (height > offSetValue3) {
// exec
}
This resolve the problems whit if/else if (Y)
Edit 1:
Try this for confirm:
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + 500;
var offSetValue2 = scrolTop + 700;
var offSetValue3 = scrolTop + 900;
var offSetValue4 = scrolTop + 1100;
$(window).scroll(function() {
var height = $(window).scrollTop();
if ( (height > offSetValue) && (height < offSetValue2)) {
console.log(1)
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
$('.showThree').fadeOut();
$('.showFour').fadeOut();
} else if ( (height > offSetValue2) && (height < offSetValue3)) {
console.log(2)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
$('.showFour').fadeOut();
} else if (height > offSetValue3) {
console.log(3)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut('slow');
}
});

Parallax based on mousemove has different offset

How can I have the same parallax offset in all the sections? Right now the offset increases as you add more sections. Note that in section .two and .three the parallax is different from section .one. I want section .two and .three to have the same parallax as in section .one. I am unsure what's causing the divs to go wider in section .two and .three.
Why is this happening and how can I fix it?
JSFiddle
Thank you in advance.
JS
var currentX = '';
var currentY = '';
var movementConstant = .05;
$(document).mousemove(function(e) {
var xToCenter = e.pageX - window.innerWidth/2;
var yToCenter = e.pageY - window.innerHeight/2;
$('.parallax div').each( function(i) {
var $el = $(this);
var newX = (i + 1) * (xToCenter * movementConstant);
var newY = (i + 1) * (yToCenter * movementConstant);
$el.css({left: newX + 'px', top: newY + 'px'});
});
});
HTML
<section class="one">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
<section class="two">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
<section class="three">
<div class="parallax">
<div class="asset asset-layer4">4</div>
<div class="asset asset-layer3">3</div>
<div class="asset asset-layer2">2</div>
<div class="asset asset-layer1">1</div>
</div>
</section>
CSS
.one,
.two,
.three {
position: relative;
width: 100%;
height: 200px;
}
.one { background-color: pink; }
.two { background-color: lightgray; }
.three { background-color: orange; }
.parallax {
position: absolute;
left: 50%;
top: 50%;
bottom: 50%;
right: 50%;
overflow: visible;
}
.asset {
position: absolute;
}
.asset-layer1 {
background-color: yellow;
}
.asset-layer2 {
background-color: green;
}
.asset-layer3 {
background-color: blue;
}
.asset-layer4 {
background-color: red;
}
body {
overflow:hidden;
}
the issue is that you are doing an each over ALL over the children div of .parallax. This means you are looping about 11 times. Each time you multiply by a larger i value, so it starts to look off.
Instead, what I have done is within each Parallax container, you will loop through it's children, giving you a value from 0-3. Now they are in sync!
https://jsfiddle.net/p4hrbdge/2/
$('.parallax').each( function(i) {
$(this).find('div').each(function(i) {
var $el = $(this);
var newX = (i + 1) * (xToCenter * movementConstant);
var newY = (i + 1) * (yToCenter * movementConstant);
$el.css({left: newX + 'px', top: newY + 'px'});
})
});

Freeze selected item when scrolling

I have a requirement, where I need to freeze the selected item from list of items in a container to top, when the selected item is in top fold of the container. and when the selected item is in bottom fold of the container, I need to stick it to the bottom.
If the selected item is in visible fold, nothing should happen. I mean the selected item should be in normal flow with other adjacent items.
I somehow managed to solve this to some extent. But when I scroll up, when the selected item is sticked above of the container, the selected item is hiding. This behavior is happening even when I scroll down, when the selected item is sticked to the bottom of the container.
Here is the Fiddle
$('.item').click(function () {
$('.item').removeClass('select').removeClass('pAbsolute');
$(this).addClass('select');
});
$('.parent').scroll(function () {
var $selected = $('.item.select');
var cTop = $selected.offset().top;
var cHeight = $selected.height();
var pHeight = $(this).height();
if (cTop < 0) {
$selected.css({
'top': $(this).scrollTop(),
'bottom': ''
}).addClass('pAbsolute');
} else if (cTop > pHeight - cHeight) {
$selected.css({
'bottom': -$(this).scrollTop(),
'top': ''
}).addClass('pAbsolute');
} else {
$selected.css({
'top': '',
'bottom': ''
}).removeClass('pAbsolute');
}
});
You have to use a consistent value to keep the initial offset relative to the container when you select it.
Then, calculate the offset and scroll value,
If cTop < 0, which means its top out of box, stick to top.
If cTop + cHeight > pHeight, which means its view is out of bottom block, set to bottom.
Else stay in position.
Edit:
When selecting a new Item, as the previous item may have .pAbsolute attr, the relative position of current item may change, but we can get the offset change by track the offset before and after those class add/remove actions.
Then we can add the missing height by change the scrollTop of the container manually.
var offset;
$('.item').click(function () {
// This is the offset in container before class change.
offset = this.offsetTop;
$('.item').removeClass('select').removeClass('pAbsolute');
$(this).addClass('select');
// Calculate the difference
var distortion = offset - this.offsetTop;
// Remove the distortion by manual scroll.
var $parent = $(this).parent();
$parent.scrollTop($parent.scrollTop() - distortion);
offset = this.offsetTop;
});
$('.parent').scroll(function () {
var $selected = $('.item.select');
var cTop = offset - $(this).scrollTop();
var cHeight = $selected.height();
var pHeight = $(this).height();
if (cTop < 0) {
$selected.css({
'top': $(this).scrollTop(),
'bottom': ''
}).addClass('pAbsolute');
} else if (cTop + cHeight > pHeight) {
$selected.css({
'bottom': -$(this).scrollTop(),
'top': ''
}).addClass('pAbsolute');
} else {
$selected.css({
'top': '',
'bottom': ''
}).removeClass('pAbsolute');
}
});
body, html {
padding: 0;
margin: 0;
}
.parent {
overflow: auto;
height: 200px;
position: relative;
}
.item {
padding: 10px 15px;
background-color: tomato;
width: 100%;
}
.item.select {
background-color: beige;
}
.pAbsolute {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="item select">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
</div>
This solution uses a bottom and top header who are filled in with the selected values and showed/hidden when necessary:
Working Fiddle
Javascript:
function stickItems($parent, itemClass, selectClass) {
// Attach dummy element items
$parent.prepend('<div class="' + itemClass + ' sticky top"></div>');
$parent.append('<div class="' + itemClass + ' sticky bottom"></div>');
var $items = $('.' + itemClass),
$stickyTop = $('.' + itemClass + '.sticky.top'),
$stickyBottom = $('.' + itemClass + '.sticky.bottom');
// Click event registering
$items.click(function (e) {
if (!$(e.target).hasClass('sticky')) {
$items.removeClass(selectClass);
$stickyTop.css('display', 'none');
$stickyBottom.css('display', 'none');
$(this).addClass(selectClass);
}
});
// Scroll event
$parent.scroll(function () {
var $self = $(this);
var $selected = $('.' + itemClass + '.' + selectClass);
var cTop = $selected.offset().top;
var pTop = $self.offset().top;
var cHeight = $selected.height();
var pHeight = $self.height();
if (cTop - pTop <= 0) {
$stickyTop.html($selected.html()).css({
'display': 'block',
'top': $(this).scrollTop()
});
$stickyBottom.css('display', 'none');
} else if (cTop > pTop && cTop < pTop + pHeight) {
$stickyTop.css('display', 'none');
$stickyBottom.css('display', 'none');
} else {
$stickyTop.css('display', 'none');
$stickyBottom.html($selected.html()).css({
'display': 'block',
'bottom': -$(this).scrollTop()
});
}
});
}
stickItems($('.parent'), 'item', 'select');
Css:
body, html {
padding: 0;
margin: 0;
}
body {
padding-top: 200px;
}
.parent {
overflow-x: hidden;
overflow-y: auto;
height: 200px;
position: relative;
}
.item {
padding: 10px 15px;
background-color: tomato;
}
.item.select {
background-color: beige;
}
.item.sticky {
background-color: beige;
display: none;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
Html:
<div class="parent">
<div class="item sticky top"></div>
<div class="item select">1</div>
<div class="item">2</div>
<!-- ... -->
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item sticky bottom"></div>
</div>

Sticky div on scroll

See this: http://jsfiddle.net/3yx5C/1/
I am trying to make a DIV(the green DIV) from the right column:
1. to be fixed when it meets the HEADER;
2. to be NOT-fixed when you scroll to the top and it meets the other DIVs above(*the grey DIVs);
What I can't achieve is the second part. Any ideas?
I have to mention that the grey DIVs on the right might be more than two, with flexible heights, and they can't be wrapped.
<div id="HEADER"></div>
<div id="WRAPPER">
<div class="layout_right">
<div style="height: 80px; background: gray;"></div>
<div style="height: 80px; background: gray;"></div>
<div id="right_ads">I am sticky!</div>
</div>
<div class="layout_middle">
<div style="width: 300px; height: 200px; background: beige;"></div>
<div style="width: 300px; height: 200px; background: pink;"></div>
<div style="width: 300px; height: 200px; background: blue;"></div>
</div>
</div>
<script type='text/javascript'>
window.addEvent('domready', function() {
function sticky_AD() {
var headerHeight2 = $('HEADER').getSize().y;
var window_top = $(window).getScroll().y + headerHeight2 + 20;
var div_top = $('right_ads').getPosition().y;
if (window_top > div_top){
$('right_ads').addClass('fixed_AD').setStyles({'top': headerHeight2 + 20});
} else {
$('right_ads').removeClass('fixed_AD').setStyles({'top':'auto'});
}
}
$(window).addEvent('scroll', function(){
sticky_AD();
});
sticky_AD();
});
</script>
Check this:
Demo here
I added a new variable var dist = $('right_ads').getPosition().y; to store the original position and use it later and changed your else to a new if : if (window_top < dist) {
Code:
function sticky_AD() {
var headerHeight2 = $('HEADER').getSize().y;
var window_top = $(window).getScroll().y + headerHeight2 + 20;
var div_top = $('right_ads').getPosition().y;
if (window_top > div_top) {
$('right_ads').addClass('fixed_AD').setStyles({
'top': headerHeight2 + 20
});
}
if (window_top < dist) {
$('right_ads').removeClass('fixed_AD').setStyles({
'top': 'auto'
});
}
}
$(window).addEvent('scroll', function () {
sticky_AD();
});
var dist = $('right_ads').getPosition().y;
sticky_AD();

Categories

Resources