Develop Reference

Inline Javascript stoped adding class to element

Hey I have an inline javascript code that adds a class to an element and makes it slide up in the screen. But it suddenly stopped working and I don't know why. Here's the HTMl and JS:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".converter").addClass("atcbottomactive");
} else {
$(".converter").removeClass("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: #eeeeee;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: green; height: 1500px; width: 100%;"></div>
<div class="converter"><div class="ccontent">...</div></div>
Here's the link
Thanks in advance :)

In fact, trying to use it without including JQuery gives you the error. You can solve this easily with "JavaScript" without using jQuery.
var element = document.querySelector(".converter");
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
padding: 20px 20px 200%;
background: blue;
color: white;
}
.converter.atcbottomactive {
background: green;
}
<div class="converter">
<div class="ccontent">Scroll me: 400px</div>
</div>

Facing no live responce on change of class of a div element on scrolling with jquery

I have had read many answers here and tried to apply them too but it is not working in my case. I can't find what is going wrong with the following code (It is just an example of the problem I am facing):-
var header = $(".top-navigation");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("top-navigtion1").removeClass("top-navigation");
} else {
header.removeClass("top-navigation1").addClass("top-navigation";
}
});
.container {
width: 600px;
height: 1500px;
background-color: #000000;
}
.top-navigation {
width: 600px;
height: 100px;
position: fixed;
background-color:transparent;
z-index: 1501 ;
color: #fff;
}
.top-navigation1 {
width: 500px;
height: 100px;
position:relative;
background-color: 'blue';
z-index: 1501;
}
<div class="container">
<div class="top-navigation">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Please check if this works for you. Fiddle
Code
<header class="clearHeader"></header>
<div class="wrapper"></div>
Css:
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader {height: 100px;}
.wrapper {
height:2000px;
}
JQuery:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
else {
$(".clearHeader").removeClass("darkHeader");
}
});

animate to right on scroll down and animate back to the left on scroll up

I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?

You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

how to pause scrolling on mouse over

Here i put a code to scroll image up and down automatically but i need to slow the speed and pause scrolling on mouse over .Please help me to solve my issue . style tag is for style the back ground and inner image
to call background image and inner image:
<img src="images/webdesign/pixo-mob.png" alt="">
</figure>
</div>
</div>
</div>
<script>
$(function () {
var $image = $('#image-autoscroll').children('img');
function animate_img() {
if ($image.css('top') == '0px') {
$image.animate({top: -($image.height()-485)+"px"}, $image.height()*5, function () {
animate_img();
});
} else {
$image.animate({top: '0px'}, $image.height()*5, function () {
animate_img();
});
}
}
animate_img();
});
</script>
<style>
.phone-style .phone {
background: url(../images/webdesign/phone.png) no-repeat;
max-width: 283px;
width: 100%;
background-size: 100%;
height: 471px;
margin: 0 auto;
overflow: hidden;
padding: 84px 41px 99px 32px;
}
.phone-style .macbook, .phone-style .phone, .phone-style .tablt {
z-index: 9999;
cursor: not-allowed;
box-sizing: border-box;
}
.phone-style .device {
width: 100%;
height: 100%;
}
.phone-style #filter, .phone-style .device {
display: block;
overflow: hidden;
}
#image-autoscroll > img {
position : relative;
}

I have found something that allows you to pause it but it goes down infinitely and once it pauses it wont start going again.
var yPos = 0;
var pic = $('#i');
var m = setInterval(function() {
$('#i').css({
'position': 'absolute',
'top': yPos
})
yPos++;
pic.mouseover(function() {
clearInterval(m)
})
pic.mouseleave(function() {
setInterval($('#i').css({
'position': 'absolute',
'top': yPos
})
yPos+=0.5;, 75)
})
}, 75)
with
<p id="i">Hello Weaver!</p>
<!-- End your code here -->
</body>
for html

Make the header sticky and reduce the size on page scroll

I have this code in which I want the header to stick on page scroll and also reduce the header size. however I managed only the sticky header on scroll down. I want all this effect to get reverted when scrolling top. any solution ?
This is my code: (also on jsFiddle)
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Just add an else that removes the class:
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else { // <=== New
$(".clearHeader").removeClass("darkHeader"); // <=== bit
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
However, as the scroll event happens a lot as the user scrolls, it may be appropriate to reduce the amount of work we do on scroll by maintaining a flag:
// Scoping function to avoid creating a global
(function() {
var haveDarkHeader = false;
$(window).scroll(function() {
var wantDarkHeader = $(window).scrollTop() >= 500;
if (wantDarkHeader != haveDarkHeader) {
haveDarkHeader = wantDarkHeader;
$(".clearHeader").toggleClass("darkHeader", haveDarkHeader);
}
});
})();
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
It's more code, though, and duplicated state (we have the flag both in our JavaScript code and in the fact that the element does or doesn't have the class).

Use toggleClass() to add or remove the class based on the scroll position:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
If scroll is greater or equal to 500, the darkHeader class will be applied. Otherwise, it will be removed.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Add these and see the magic
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
else{
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader{
height: 200px;
background-color: #333;
position: fixed;
top:200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height:2000px;
}
for more, check out my fiddle : - http://jsfiddle.net/Jinukurian7/w9EgE/5/