Develop Reference

How to put an element in hover state when scrolled down using javascript

I am trying to make a div element which when scrolled down will change properties drastically. Here is the codepen example of how I want it to work.
Instead of hover I want it so that when scrolled down, the page wide div will turn into that little circle div which when clicked will function as a back to the top button. It doesn't matter if more classes are added or anything of that sort. I am very new to js and I tried a few things and also googled about it, I got the scroll code from w3school's how to make a back to top button guide which specifies that when scrolled down by 20px the code would react, but I don't know how to turn the JavaScript to JS when scrolled down along with the transformation of the div.
Thanks in advance

I think you want to implement scroll to top functionality, very common these days in most of the web app.
You need to keep below things and design that feature.
There is one header, that should have a reference ID with hash to scroll back to top
Create a button that will always static position (JS) button, will show up when user scroll the window
Bind click event on the button that scroll back to top
Here is the you can see this implementation and use it.
.html
<h1 class="intro-copy">
Scroll down to use this simple back-to-top button made with modern vanilla javascript.
</h1>
<a class="top-link hide" href="" id="js-top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
<span class="screen-reader-text">Back to top</span>
</a>
.css
body {
height: 2000px;
position: relative;
}
.intro-copy {
padding: 1em;
margin: 50vh auto;
max-width: 15em;
font-family: Helvetica;
font-weight: lighter;
font-size: 2em;
line-height: 1.2;
text-align: center;
}
.top-link {
transition: all .25s ease-in-out;
position: fixed;
bottom: 0;
right: 0;
display: inline-flex;
cursor: pointer;
align-items: center;
justify-content: center;
margin: 0 3em 3em 0;
border-radius: 50%;
padding: .25em;
width: 80px;
height: 80px;
background-color: #F8F8F8;
&.show {
visibility: visible;
opacity: 1;
}
&.hide {
visibility: hidden;
opacity: 0;
}
svg {
fill: #000;
width: 24px;
height: 12px;
}
&:hover {
background-color: #E8E8E8;
svg {
fill: #000000;
}
}
}
// Text meant only for screen readers.
.screen-reader-text {
position: absolute;
clip-path: inset(50%);
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
word-wrap: normal !important;
clip: rect(1px, 1px, 1px, 1px);
&:focus {
display: block;
top: 5px;
left: 5px;
z-index: 100000; // Above WP toolbar
clip-path: none;
background-color: #eee;
padding: 15px 23px 14px;
width: auto;
height: auto;
text-decoration: none;
line-height: normal;
color: #444;
font-size: 1em;
clip: auto !important;
}
}
JS:
// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');
// Let's set up a function that shows our scroll-to-top button if we scroll beyond the height of the initial window.
const scrollFunc = () => {
// Get the current scroll value
let y = window.scrollY;
// If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
if (y > 0) {
scrollToTopButton.className = "top-link show";
} else {
scrollToTopButton.className = "top-link hide";
}
};
window.addEventListener("scroll", scrollFunc);
const scrollToTop = () => {
// Let's set a variable for the number of pixels we are from the top of the document.
const c = document.documentElement.scrollTop || document.body.scrollTop;
// If that number is greater than 0, we'll scroll back to 0, or the top of the document.
// We'll also animate that scroll with requestAnimationFrame:
// https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
// ScrollTo takes an x and a y coordinate.
// Increase the '10' value to get a smoother/slower scroll!
window.scrollTo(0, c - c / 10);
}
};
// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
e.preventDefault();
scrollToTop();
}

Why is display none in the CSS not removed by fadein?

So I'm trying to get a div to fade in when a scroll threshold has been reached. It starts off with display: none; in the css for its div id. When the threshold is hit, fadein does not remove display:none; from the css as I've read it should.
CSS:
#SideBanner01{
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
#SideBanner01 img{
width: 206.25%;
margin: -30% -15% -8% -140%;
}
Javascript:
$(window).scroll(function () {
var delay = 500;
var scrollTop = $(window).scrollTop();
if (scrollTop > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
Inspector after fadein runs:
element {
position: fixed;
}
#SideBanner01 {
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
body {
color: #000000;
text-align: left;
}
Html:
<div style="position: fixed;" id="SideBanner01"><img src="http://survey.unifocus.com/ClientFiles/19500/Bardessono-stone-wheels.jpg"></div>
I'm using jquery 1.6 so I believe fadein should work as I'm trying it. Any idea on what is going on? I've been able to get "$('#SideBanner01').show(delay);" to work but it flies in from the side but it looks pretty tacky. Thanks in advance.

Don't you mean to do:
$(window).scroll(function () {
var delay = 500;
if ($(this).scrollTop() > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
In your code snippet, scrollTop is used as a regular variable (not defined).

Controlling JQuery Animate Function

I've been playing with "marginLeft: "100%"" but that only moves the div off the screen entirely. I want the div, onClick, to float:right against the edge of the right side of the screen.
JSFiddle:
https://jsfiddle.net/487r8qza/
HTML
<div id="footer">
<one id="one">
</one>
<two id="two">
</two>
<three id="three">
</three>
</div>
JavaScript
$("#footer").click(function(){
$("#one").animate({
marginLeft: "+=900px",
}, 2000 );
$("#two").animate({
marginLeft: "+=900px",
}, 800 );
$("#three").animate({
marginLeft: "+=900px",
}, 333 );
});
$("#three").click(function() {
$("#three").animate({
marginLeft: "100%"} , 1000
);
});
CSS
#footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
max-width: 100%;
height: 115px;
background-color: #4a4a4a;
}
one {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #070707;
height: 115px;
margin-left: -900px;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #1a1a1a;
height: 115px;
margin-left: -900px;
}
three {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #2c2c2c;
height: 115px;
margin-left: -900px;
}

Sorry if it took this long, something came up. Right, so I got it working. Hope this helps
JSFIDDLE
As for CSS, I kept it as simple as possible. The trick here is to make your DIVs display inline-block, so that at the very start, they are neatly stacked next to each other. You will also want to have them all be float right.
CSS:
.box-container{
width: 100%;
height: 115px;
position: relative;
overflow: hidden;
}
.box-item{
width: 300px;
height: 115px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
}
.b0{
background: #7888D9;
}
.b1{
background: #76D54E;
}
.b2{
background: #DF7B41;
}
Next, in your HTML, you need to give each DIVs the same classname, which will simplify the Jquery click event. Finally, we will also give our first DIV a classname of "current". This will control which DIV must move and which DIV must wait and stay idle as long as the one beside him hasn't moved. You'll understand soon enough.
HTML:
<div class="box-container">
<div class="box-item b0 current">
Box 1
</div>
<div class="box-item b1">
Box 2
</div>
<div class="box-item b2">
Box 3
</div>
</div>
Finally, as for the Jquery, this is where it gets a bit complicated, I'll try to explain the best I can. Bare in mind that math is not quite my forte. Since our DIVS all float right in the CSS, well, they will all be stacked to the right (of course). To counter that and position them to the left, we need to give each DIV a right position. This position will be some kind of offset. To get this number, we need to multiply the width of a DIV by the total number of DIVs. After that, we must subtract this number to the total width of our DIVs' container (basically the browser width).
As for the click event, we must first check if the DIV we clicked has our "current" classname. If it does, we move it, if not, we don't. The easy part is moving them. By resetting a DIV's right value to 0, each one will slide accordingly to the right with our animate event. Once this is done, we switch the "current" classname to the next DIV. We then increment a counter. This will help to see if all DIVs has been moved.
Once all DIVs have been moved to the right, there is an IF statement that will check our counter and see if it is greater than our total number of DIVs. If it is, the sliding motion is inverted and all DIV's will return to the left. In the same manner, if the clicked element is not the current DIV, it will not move. if it is, it will move back to the left. When all DIV's have been move back in default position, ou counter is reset and our "current" classname is reassigned to the very first DIV.
The resize function is not optimal, but it deals with any responsive issue you could face. It will reset all DIVs to the left and recalculate the offset, so that each DIV never slide offscreen. Needs a little work, but it's better than nothing for now.
JQUERY:
var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;
$(function () {
$boxWidth = $('.box-item').width();
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').css('right',$offsetRight);
$('.box-item').click(function(event) {
if($(this).hasClass('current')){
if($count < $('.box-item').length){
$(this).animate({
right: "0px",
}, 2000, function(){
$count++;
$(this).removeClass('current');
if($count < $('.box-item').length){
$(this).next().addClass('current');
}
else{
$(this).addClass('current');
}
});
}
else{
$(this).animate({
right: $offsetRight,
}, 2000, function(){
$count++;
$(this).removeClass('current');
console.log($count);
if($count < ($('.box-item').length*2)){
$(this).prev().addClass('current');
}
else{
$(this).addClass('current');
$count = 0;
}
});
}
}
});
window.onresize = myResize;
myResize();
});
function myResize(){
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').each(function(){
$(this).css('right',$offsetRight);
});
$('.box-item').eq(0).addClass('current');
$count = 0;
}

Keeping my nav when you scroll down the page

I'm trying to design a website for my company, but I can't figure one thing.
I want navbar fixed while people scroll down the page
like this one
http://www.quintessentially.com (as you can see, the navigation bar gets fixed when you scroll down the page )
I'm using jQuery 1.8.3.min.js
and this code
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').addClass('absolute');
}
else {
$('.nav').removeClass('fixed');
}
});
and the css is like this
header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}
.fixed{
position: fixed;
top: 0; }
But I don't why it isn't working.
Does someone know how to fix it?
Thanks !! :D
ps: sorry about my bad english.

You need to reverse the logic.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').
.removeClass('absolute')
.addClass('fixed');
}
else {
$('.nav')
.removeClass('fixed')
.addclass('absolute');
}
});
Added a removeClass as well to prevent any class priority issues.

jQuery fixed header slide down on scroll issue

I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.
My html like that
<div class="heading-wrapper">
1
2
3
4
5
</div>
Css
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
and jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
It dont work like what I want.
If scrolling by pressing down mouse whell - it dont animate..
Animation appears at once only..
Slide up animation never appears..
If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))
Please, help me to fix this, and remember, do not judge strictly! :)
JsFiddle link

Demo
js
$(document).ready(function () {
$("header").before($("header").clone().addClass("animateIt"));
$(window).on("scroll", function () {
$("body").toggleClass("down", ($(window).scrollTop() > 100));
});
});
css
body, html {
margin:0;
padding:0;
}
header {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: #000;
color: #fff;
}
header.animateIt {
position:fixed;
top:-60px;
left: 0;
right: 0;
z-index:999;
transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
top:0;
}
.content {
padding: 0 20px 20px;
background: #fff;
line-height: 1.5;
color: #333;
}
html
<header>
1
2
3
4
5
</header>

Here's how I would do it.
First, depending on the browsers you're supporting, you could add this CSS :
.heading-wrapper {
position: fixed;
top: -80px;
transition: top 1s linear; /*as you wish*/
[...]
}
.heading-wrapper.relative {
position: absolute;
top: 0px;
}
.heading-wrapper:not(.relative).fixed {
top: 0px;
}
Then in Javascript :
var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
$wrapper.clone().appendTo("body").addClass("relative");
$win.scroll(function () {
top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if( top > 300)
setTimeout(function(){$wrapper.addClass("fixed");},0);
else if( $wrapper.hasClass("fixed") )
setTimeout(function(){$wrapper.removeClass("fixed");},0);
});
I updated your JSFiddle.
EDIT : Added a cloned menu, absolute.