How to Add Smooth Scrolling Back To Top Button using react js? - javascript

I have implemented this using jquery but want to create a component in react to do the same
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.move-top').fadeIn(duration);
} else {
jQuery('.move-top').fadeOut(duration);
}
});
jQuery('.move-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
In my page footer
↑


First, we need to track the page as it's scrolled in the state of the component. This tracking should only be happening while the component is mounted. This can be done like so:
getInitialState: function() {
return { scrollTop: 0 };
},
componentWillMount: function() {
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
window.removeEventListener('scroll', this.handleScroll);
},
handleScroll: function() {
this.setState({scrollTop: $(window).scrollTop()});
},
Note: this is still using jQuery to get the current scroll position. See this question for doing this without jQuery.
Then we need to render the component:
scrollToTop: function() {
$(window).animate({scrollTop: 0}, this.props.duration);
},
render: function() {
if (this.state.scrollTop < this.props.offset) {
return null;
}
return <a href="#" className="move-top" onClick={this.scrollToTop}>↑</a>
}
This is still using jQuery to do the actual scrolling. Have a look a this question for scrolling without jQuery.
If you want this component to fade in and out, you should wrap it in a ReactCSSTransitionGroup and use CSS animations. This is documented on the React docs.
Here's a JSFiddle demo.


If you'd like to avoid jQuery altogether
var Example = React.createClass({
scrollUp: function () {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top > 0) {
window.scrollTo(0, top - 15)
setTimeout(this.scrollUp, 10)
}
},
render: function () {
return (<div><h1>Page Header</h1>
<div ref="container" className="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a className="move-top" onClick={this.scrollUp}>Up</a>
</div>
</div>);
}
});


After searching on google, I reached a jQuery code as your needs in JSFiddle . Then, I reordered your jQuery:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.move-top').fadeIn();
} else {
$('.move-top').fadeOut();
}
});
$('.move-top').click(function() {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
.container {
min-height: 1000px;
}
.move-top {
position: fixed;
bottom: 50px;
right: 100px;
display: none;
padding: 10px 15px;
color: #fff;
font-weight: 600;
background: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h1>Page Header</h1>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a class="move-top" href="#">↑</a>
</div>
<h3>Page Footer</h3>


Use the following code like this :
smoothScroll.scrollTo(ID_OF_DOM_ELEMENT, OPTIONAL_CALLBACK_ON_SCROLL_DONE)
Code :
var smoothScroll = {
timer: null,
stop: function () {
clearTimeout(this.timer);
},
scrollTo: function (id, callback) {
var settings = {
duration: 1000,
easing: {
outQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
}
};
var percentage;
var startTime;
var node = document.getElementById(id);
var nodeTop = node.offsetTop;
var nodeHeight = node.offsetHeight;
var body = document.body;
var html = document.documentElement;
var height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
var windowHeight = window.innerHeight
var offset = window.pageYOffset;
var delta = nodeTop - offset;
var bottomScrollableY = height - windowHeight;
var targetY = (bottomScrollableY < delta) ?
bottomScrollableY - (height - nodeTop - nodeHeight + offset):
delta;
startTime = Date.now();
percentage = 0;
if (this.timer) {
clearInterval(this.timer);
}
function step () {
var yScroll;
var elapsed = Date.now() - startTime;
if (elapsed > settings.duration) {
clearTimeout(this.timer);
}
percentage = elapsed / settings.duration;
if (percentage > 1) {
clearTimeout(this.timer);
if (callback) {
callback();
}
} else {
yScroll = settings.easing.outQuint(0, elapsed, offset, targetY, settings.duration);
window.scrollTo(0, yScroll);
this.timer = setTimeout(step, 10);
}
}
this.timer = setTimeout(step, 10);
}
};


I think react-scroll is worth being mentioned, add this to your component's click handler (onClick={this.handleClick})
import Scroll from 'react-scroll'
...
Scroll.animateScroll.scrollToTop({options})
...
With options being an object specified as per Props/Options


I don't recommend mixing jQuery and React/Angular. It can be done easily using 'react-scroll' like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { animateScroll as scroll } from 'react-scroll';
class Scrolltotop extends Component {
ScrollTo() {
scroll.scrollToTop();
}
render() {
return (
<div className="move-top-wrap">
<div onClick={this.ScrollTo} class="move-top">↑</div>
</div>
);
}
}
export default Scrolltotop;
You can check out all basic examples of react-scroll usage here.
You can now import and use this component anywhere.

Related

having a problem with setting up parallax scroll

Trying to do my first parallax work, but I'm having an abnormal problem
when I write this code
window.addEventListener("scroll", function(e) {
const target = document.querySelector(".kalagh");
let scrolled = window.pageYOffset;
let rate = scrolled * 5;
target.style.transform = "translate3d(0px,'+rate+'px,0px)";
});
It doesn't do anything, but when I change rate variable to hard size like 500px it works fine, I've checked the code like billion times and can't understand where I am doing it wrong, BTW it is being done on a ul which has 3 lis, 1 of them has the class "kalagh".

Eh, you have a typo of mismatched quotation marks: in "...'...'..." the '...' part is still "inside" the string, you need "..." to "bail out" to JS code. Then it works:
window.addEventListener("scroll", function(e) {
const target = document.querySelector(".kalagh");
let scrolled = window.pageYOffset;
target.innerText=scrolled;
let rate = scrolled * 5;
target.style.transform = "translate3d(0px,"+rate+"px,0px)";
});
.kalagh {
background-color: red;
position:absolute;
}
<div class="kalagh">...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Smooth scroll URL issues from one page to another page

I am using GSAP. I am getting the issue on the smooth scroll.
I have two pages. home.php and aboutus.php. I have one menu and I am adding dynamically on all the pages.
I am on the home page and if I click on contactus then smooth scroll is working and my URL is http://localhost:8080/example/smoth1.php#contactus
Now my issue is, I am on aboutus page and when I click on contactus i am getting the URL http://localhost:8080/example/aboutus.php#contactus
It's not redirecting on the homepage because I have contactus section on the home page.
I tried <li>Contactus</li> but then my smothscroll not wokring.
Would you help me out in this?
$(document).ready(function() {
var controller1 = new ScrollMagic.Controller();
controller1.scrollTo(function(target) {
TweenMax.to(window, 3, {
scrollTo: {
y: target - 65, // scroll position of the target along y axis
autoKill: true, // allows user to kill scroll action smoothly
},
ease: Cubic.easeInOut
});
});
// Bind scroll to anchor links
$(document).on("click", ".smothscrollclass a[href^='#']", function(e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller1.scrollTo(id);
// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
};
});
});
.col1 {
min-height: 1000px;
}
<div>
<ul class="main_list smothscrollclass">
<li>Home</li>
<li>Contactus</li>
<li>Aboutus</li>
</ul>
</div>
<div class="col1" id="home">
<h2>Home</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="col2" id="contactus">
<h2>Contactus</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>

onclick slideToggle + scrollTo DIV

I have this very simple function that slideToggle() a hidden div and scrolls a div to the top. The slideToggle works ok, the scroll to top doesn't work at all.
Any hints?
My idea is that when the scrollTo function ends then starts the slideToggle one.
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800),
$(this).parent().find('.more').hide(),
$('.whole').scrollTo('#about', 100)
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum."<br><br>
<div class="more-about">MORE</div>
<div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Updated: $('.whole').scrollTop('#about', 100)
There is no #about in your dom.
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800),
$(this).parent().find('.more').hide(),
$('.whole').scrollTop('#about', 100)
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum."<br><br>
<div class="more-about">MORE</div>
<div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

I believe you want to show the hidden content on click of more and scroll to the position of the new content, here is the bin -- http://jsbin.com/wigojowabu/edit?html,js,console,output
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800);
$(this).hide();
window.scrollTo(0,$('#about').offset().top);
});
I have used window.scrollTo(xpos, ypos) to scroll to the element.

You can use animate() and scrollTop inside for auto scroll in the good section. Please try bellow:
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800)
$(this).parent().find('.more').hide()
$('html').animate( { scrollTop: ($(".whole").scrollTop()+$(".more-about").offset().top) }, 1000 );
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum."<br><br>
<div class="more-about">MORE</div>
<div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Change class of fixed div when over scrolled section

I have fixed div with menu. There are also some sections. Each section has data attribute set to specific class name (eg. data-menu="black").
What I'd like to achieve is when user scroll and a section with this attribute is under a fixed div, this div gets the class based on data-menu attribute. And remove when section isn't below anymore.
This is my is fiddle: https://jsfiddle.net/pt3taagp/1/
HTML
<div class="fixed-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>etc.</li>
</ul>
</div>
<section data-menu="menu-black">
<img src="http://placehold.it/600x600/ffffff/000000">
</section>
<section data-menu="menu-white">
<img src="http://placehold.it/600x600/000000/ffffff">
</section>
<div>some other content</div>
CSS
fixed-menu {
position:fixed;
top:50px;
left:50px;
width:250px;
background-color:red
}
.fixed-menu.menu-black {
background-color:#000;
}
.fixed-menu.menu-white {
background-color:#FFF;
}
By default menu has red background but when section with data-menu attribute=menu-white is under I'd like this menu to change background color to white, etc.

JQuery offet() method gives relative positioning of a particular element. Check out this fiddle.
Although, this will only work if you have fixed section height.
window.onscroll = function() {
myFunction()
};
function myFunction() {
var x = $("#mainmenu").offset();
if (x.top < 612) {
document.getElementById("mainmenu").className = "fixed-menu menu-white";
} else if (x.top > 612) {
document.getElementById("mainmenu").className = "fixed-menu menu-black";
}else{
document.getElementById("mainmenu").className = "fixed-menu";
}
}
.fixed-menu {
position: fixed;
top: 50px;
left: 50px;
width: 250px;
background-color: red
}
.menu-black {
background-color: #000;
color: white;
}
.menu-white {
background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="mainmenu" class="fixed-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>etc.</li>
</ul>
</div>
<div class="black">
<section data-menu="menu-black">
<img src="http://placehold.it/600x600/ffffff/000000">
</section>
</div>
<div id="white">
<section data-menu="menu-white">
<img src="http://placehold.it/600x600/000000/ffffff">
</section>
</div>
<div class="some-other-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

Thanks to how get current mouse position on scroll and select all elements present at specified position the solution is:
get the mouse position in any case
handle the window scroll event
while scrolling, if the element under current mouse position is a section: change class according to the data-menu. In all other cases remove the added class.
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
function GetSectionElementsAt(x, y) {
var elements = $('section').map(function() {
var thisObj = $(this);
var offset = thisObj.offset();
var l = offset.left;
var t = offset.top;
var h = thisObj.height();
var w = thisObj.width();
var maxx = l + w;
var maxy = t + h;
return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? thisObj : null;
});
return elements;
}
$(document).mousemove(function(e) {
xMousePos = e.pageX;
yMousePos = e.pageY;
});
$(window).on('scroll', function (e) {
if(lastScrolledLeft != $(document).scrollLeft()){
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if(lastScrolledTop != $(document).scrollTop()){
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
var eleAtCurrentMousePos = GetSectionElementsAt(xMousePos, yMousePos);
if (eleAtCurrentMousePos.length > 0) {
var classToSet = eleAtCurrentMousePos[0].data('menu');
if (!$('div.fixed-menu').hasClass(classToSet)) {
$('div.fixed-menu').removeClass('menu-white menu-black').addClass(classToSet);
}
} else {
$('div.fixed-menu').removeClass('menu-white menu-black');
}
});
.fixed-menu {
position: fixed;
top: 50px;
left: 50px;
width: 250px;
background-color: red
}
.fixed-menu.menu-black {
background-color: #000;
}
.fixed-menu.menu-white {
background-color: #FFF;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="fixed-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>etc.</li>
</ul>
</div>
<section data-menu="menu-black">
<img src="http://placehold.it/600x600/ffffff/000000">
</section>
<section data-menu="menu-white">
<img src="http://placehold.it/600x600/000000/ffffff">
</section>
<div class="some-other-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>

Custom Slider - How To Automatically Go Through Each Slider

I am fairly new to Javascript and recently built the following slider: http://cpointweb.com/dtv/ (if you hover over blue boxes, content on the left changes)
Here is the code:
function changeSlider(header, html, img) {
var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
var slider = '<img src="' + img + '" />';
$('.right').fadeOut('fast', function(){
$(this).html(rightHtml).fadeIn('slow');
});
$('.slider-image').fadeOut('fast', function(){
$(this).html(slider).fadeIn('slow');
});
}
$('#1').mouseover(function() {
changeSlider("Dossani Turnage & Van Hoose Thanks You!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-one.jpg");
});
$('#2').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-two.jpg");;
});
$('#3').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-three.jpg");
});
$('#4').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-four.jpg");
});
$('#5').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-five.jpg");
});
$('#6').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-6.jpg");
});
Is it possible to rotate through each of these with my current code? I know of WindowTimers.setInterval() but am not sure how I would execute that with my current code.
Any help would be greatly appreciated.
Thanks!!

put your header, html and img strings in an array.
var dataArray = [["header", "html", "img"], ["header2", "html2", "img2"]];
set a time variable and a counter,
var loopTime = 2000;
var count = 0;
then use setTimeout to call a function that increments a counter, then calls your changeSlider function.
$(function(){
Loop();
});
function Loop(){
changeSlider(dataArray[count][0], dataArray[count][1], dataArray[count][2]);
count++;
if(count >= dataArray.length) count = 0;
setTimeout(Loop, loopTime);
}
function changeSlider(header, html, img) {
var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
var slider = '<img src="' + img + '" />';
$('.right').fadeOut('fast', function(){
$(this).html(rightHtml).fadeIn('slow');
});
$('.slider-image').fadeOut('fast', function(){
$(this).html(slider).fadeIn('slow');
});
}
update;
if you were to put a data-id property on your blue boxes you could then use it to index the array when you do your mouseover calls
<img id="1" data-id="0"/>
$('#1').mouseover(function() {
var id = parseInt($(this).data("id"));
changeSlider(dataArray[id][0], dataArray[id][1], dataArray[id][2]);
}
UPDATE:
I have made a JSFiddle showing this looping working here -> JSFiddle

Like this?
var dataArray = ["header", "html", "img"];
var loopTime = 2000;
var count = 0;
function changeSlider(header, html, img) {
var rightHtml = '<h2>' + header + '</h2><p>' + html + '</p>';
var slider = '<img src="' + img + '" />';
$('.right').fadeOut('fast', function(){
$(this).html(rightHtml).fadeIn('slow');
});
$('.slider-image').fadeOut('fast', function(){
$(this).html(slider).fadeIn('slow');
});
$(function(){
SetTimeout(Loop, loopTime);
});
function Loop(){
changeSlider(dataArray[count][0], dataArray[count][1], dataArray[count][2]);
count++;
if(count >= dataArray.length) count = 0;
setTimeout(Loop, loopTime);
}
}
$('#1').mouseover(function() {
changeSlider("Dossani Turnage & Van Hoose Thanks You!", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-one.jpg");
});
$('#2').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-two.jpg");;
});
$('#3').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-three.jpg");
});
$('#4').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-four.jpg");
});
$('#5').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-five.jpg");
});
$('#6').mouseover(function() {
changeSlider("With Dossani, Turnage & Van Hoose...", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Testing Another Line","img/slider-6.jpg");
});

Categories

Resources