When scrolling down the page the sticky menu is enabled and gets little jerky. What's the issue and how to get smooth animation.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(100);
$('.sticky-menu').fadeIn(100);
} else {
$('.head_section').fadeIn(100);
$('.sticky-menu').fadeOut(100);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
transition: all 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
Is there any solution for this?
In your example, you used jQuery for the animation. So you need to remove the transition from your CSS. You can only use one, jQuery OR CSS, but not both in this case.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(1000);
$('.sticky-menu').fadeIn(1000);
} else {
$('.head_section').fadeIn(1000);
$('.sticky-menu').fadeOut(1000);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
Related
Here is simple jQuery slider, but i want to set this as when the last img div reach then if we click on next it should be return to the first one again and same as if we are going to back side with the previous button the if the first img div reach then it should be return as last one same as backside.
i tried this code but it not working:
$(document).ready(function(){
$('.next').click(function(){
var active = $('.slide .active');
if(active.next('div').length != 0) {
$('.slide').find('div.active').next().
addClass('active');
$('.slide').find('div.active').prev().
removeClass('active');
}
else {
$('#slide div:first').addClass('active');
}
});
$('.prev').click(function(){
if(active.prev('div').length != 0) {
$('.slide').find('div.active').prev().
addClass('active');
$('.slide').find('div.active').next().
removeClass('active');
}
else {
$('#slide div:last').addClass('active');
}
});
});
My whole slider code is:
$(document).ready(function(){
$('.next').click(function(){
$('.slide').find('div.active').next().
addClass('active');
$('.slide').find('div.active').prev().
removeClass('active');
});
$('.prev').click(function(){
$('.slide').find('div.active').prev().
addClass('active');
$('.slide').find('div.active').next().
removeClass('active');
});
});
.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}
.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.container .slide div img
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .slide div.active
{
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
When clicking on next - check if the last div has the class active. If so remove it and add it to the first div. When clicking on prev - do the opposite.
Snippet:
$(document).ready(function(){
$('.next').click(function(){
$('.slide').find('div.active').next().addClass('active');
$('.slide').find('div.active').prev().removeClass('active');
if ($('.slide div:last-of-type').hasClass('active')) {
$('.slide div:last-of-type').removeClass('active');
$('.slide div:first-of-type').addClass('active');
}
});
$('.prev').click(function(){
$('.slide').find('div.active').prev().addClass('active');
$('.slide').find('div.active').next().removeClass('active');
if ($('.slide div:first-of-type').hasClass('active')) {
$('.slide div:first-of-type').removeClass('active');
$('.slide div:last-of-type').addClass('active');
}
});
});
.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}
.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.container .slide div img
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .slide div.active
{
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
I want to set the animation of the element while scrolling down the page. I want to use only JavaScript to achieve that.
I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.
The problem is, when I load the page, there is no animation (That's good). When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.
Here is my full code for this part:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
});
</script>
<body>
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
I'm learning JS so it's important to me to not use any libraries :P
Thanks a lot
I modified your code a bit. You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.
window.onscroll = function() {
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
}
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
Also, your syntax for defining keyframe was incorrect. It is
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
And not
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
I have the following code that contains positioned hidden div (.converter) and I use JS to make it slide up and down based on the user's scroll. But I would like to make it smoothly and I thought transition would do the job.
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
var element = document.querySelector(".converter");
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: red;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
.page {
background: green;
height: 1500px;
width: 100%;
}
<div class="page">Scroll me: 400px</div>
<div class="converter">
<div class="ccontent"></div>
</div>
Thanks in advance
So close! All you were missing was the 'px' on your .converter class bottom attribute. Because -200 isn't a valid bottom, you were going from an unset bottom to 0px, which cant be animated/ transitioned.
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
var element = document.querySelector(".converter");
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200px;
background: red;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
.page {
background: green;
height: 1500px;
width: 100%;
}
<div class="page">Scroll me: 400px</div>
<div class="converter">
<div class="ccontent"></div>
</div>
I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!
Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>
When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}