Sorry in advance, beginner question here :-)
I'm trying to achieve a scrollspy effect on my nav. Basically, I just need that my link gets a red color when I scroll to the corresponding section.
I already looked and found some examples online but nothing I tried really worked out, and my JS is sloppy anyway.
Anyone could help here?
here is the full JSFiddle I have so far:
https://jsfiddle.net/Tiph/v6vtczwe/
Tahnk you so much for your time and help!
$(document).ready(function(){
//SMOOTHSCROLL
$('.nav-top a, .scrollDown').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') )
.offset().top
}, 700);
return false;
});
});
$(window).scroll(function(){
var $window =$(window);
var scroll_top = $(window).scrollTop();
console.log( $(window).scrollTop());
var position = $("section").offset().top;
var news = $("#newsSection").offset().top;
var shows = $("#showsSection").offset().top;
if (scroll_top >= news) {
$('.news').addClass("selected");
}
if (scroll_top >= shows) {
$('.shows').addClass("selected");
}
});
$('.nav-top a, .scrollDown').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href'))
.offset().top
}, 700);
return false;
});
$(window).scroll(function() {
var x = $(".nav-top").offset().top;
$("section").each(function(index) {
var z = $(this).attr("id");
if (x > $(this).offset().top && x <= $(this).offset().top + $(this).height()) {
$('a.' + z).css("color", "red");
} else {
$('a.' + z).css("color", "gray")
}
})
})
.menu > nav {
height: 50px;
position: fixed;
bottom: 0%;
width: 100%;
background-color: #393838;
opacity: 1;
padding-left: 70px;
}
.selected {
color: red
}
.nav-top {
padding: 15px 0;
background: rgb(034, 034, 034);
position: relative;
z-index: 900;
display: flex;
flex-flow: row wrap;
position: relative;
}
.nav-top a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald';
font-size: 30px;
letter-spacing: 2px;
line-height: 55px;
margin-right: 30px;
transition: .6s all ease-in-out;
}
.nav-top a:hover {
color: #de031d;
transition: .3s all ease-in-out;
}
.section {
height: 600px;
}
.grey {
background-color: grey;
}
.darkGrey {
background-color: darkgrey;
}
a.newsSection{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<nav class="nav-top">
<a class="newsSection" href="#newsSection">News</a>
<a class="showsSection" href="#showsSection">Shows</a>
<a class="musicSection" href="#musicSection">Discographie</a>
<a class="mediaSection" href="#mediaSection">Medias</a>
<a class="bioSection" href="#bioSection">Bio</a>
</nav>
</div>
<section id="newsSection" class="section grey">
first section
</section>
<section id="showsSection" class="section darkGrey">
second section
</section>
<section id="musicSection" class="section grey">
third section
</section>
<section id="mediaSection" class="section darkGrey">
fourth section
</section>
<section id="bioSection" class="section grey">
fifth section
</section>
Related
I am creating a web page with an Index along one side, with anchor links to each relevant section on the page.
Upon loading the page, the first point on the index list is highlighted (different colour), when the user scrolls down manually to another section, I want the corresponding point on the index list to then become highlighted.
So I have a CSS property, to highlight the index point, and this is initially set to the first point on the list.
How can I take this CSS property from one element, and give it to another?
.current {
opacity: 1;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
}
This is the CSS applied to the element that should be highlighted. Currently, the first element in the index is always highlighted, but of course, I need it to change as the user scrolls down the page.
Let me know if you need more info.
It is possible with Intersection Observer API .
Example Code using jQuery:
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
var threshold=250; //in px
$('section').each(function(i) //list of sections tag to loop
{
if ($(this).position().top-threshold <= scrollDistance && i<4) {
$('.nav-menu li.menu-active').removeClass('menu-active');
$('.nav-menu li').eq(i).addClass('menu-active');
}
});
}).scroll();
Please see this fiddle. https://jsfiddle.net/cse_tushar/Dxtyu/141/
HTML :-
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
CSS:-
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
Jquery:-
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
Please add just active class to the current button (highlight it)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
You can use the onScroll event to so that a function is triggered when a user scrolls. This can then use scrollTop to get the position.
document.getElementById("idOfScrollingSection").onscroll(() => {
let scrollValue = document.getElementById("elementId").scrollTop;
//Remove class from highlighted item
let oldElement = document.getElementsByClassName("current");
oldElement.classList.remove("current");
//Add highlight class, change values depending on page position
if (scrollValue < 200) {
let elementToBeHighlighted = document.getElementById("idOfElementToBeHighlighted");
elementToBeHighlighted.classList.add("current");
} else if ....
} else {
let elementToBeHighlighted = document.getElementById("idOfElementToBeHighlighted");
elementToBeHighlighted.classList.add("current");
}
})
This is done is pure JS and would be a lot better using jQuery
I have a page that has a fixed menu and content box(div).
When click the menu, content box scroll to specific div.
So far so good.
This is the sample here.
https://jsfiddle.net/ezrinn/8cdjsmb9/11/
The problem is when I wrap this whole div and, make them as show/hide toggle button, the scroll is not working.
This is the sample that not working.
https://jsfiddle.net/ezrinn/8cdjsmb9/10/
Also here is the snippet
$('.btn').click(function() {
$(".wrap").toggleClass('on');
});
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
$(document).ready(function() {
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
$('a').bind('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").scroll(function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a> </li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>a
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>
What Do I need to fix the code? please help.
When you calculate your offset, the div is hidden with display: none. This results in the offsets being set/calculated to zero.
Here's a quick fix I threw together: https://jsfiddle.net/hrb58zae/
Basically, moved the logic to determine offset after clicking show/hide.
var setOffset = null;
...
if (!setOffset) {
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
setOffset = true;
}
In your CSS, instead of using display: none and display: block, try using visible instead:
.wrap { visibility:hidden;}
.wrap.on { visibility:visible;}
This will hide the element without affecting the layout.
Updated fiddle: https://jsfiddle.net/a5u683es/
The problem was you are trying to update id_offset_map when content was hidden. When you use 'display:none' prop you won't get dimensions for that element and so its not working.
I updated the logic please check the fiddle https://jsfiddle.net/qfrsmnh5/
var id_offset_map = {};
var div_parent_class_name = "wrap_scroll";
var divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
function updateOffsets(){
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
$(document).ready(function() {
$('.btn').click(function() {
$(".wrap").toggleClass('on');
if($(".wrap").hasClass("on")){
updateOffsets();
}
});
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").on('scroll',function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red;
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll;
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>
works perfectly, it's just that when you use display: none you can not do the offsetTop calculations because in fact the element is not rendered, I'm not sure if all the values give 0 or undefined, I guess undefined, a solution is always calculate Positions using a function:
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
function calcTops(){
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
https://jsfiddle.net/561oe7rb/1/
is not the optimal way, but it is to give you an idea. Sorry for my English.
Just Checkout This Working page I have designed
jQuery(document).on('scroll', function(){
onScroll();
});
jQuery(document).ready(function($) {
div_slider();
showhide();
});
/*show hide content*/
function showhide(){
$('.toggle-wrapper button').on('click', function(){
$('.wrapper').toggle();
// div_slider();
})
}
/*scrolling page on header elements click*/
function div_slider(){
$('ul li a').on('click', function(e){
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate({
scrollTop: attrval.offset().top
}, 1000)
});
}
/*adding active class on header elements on page scroll*/
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('ul li a').each(function () {
var scroll_link = $(this);
var ref_scroll_Link = $(scroll_link.attr("href"));
if (ref_scroll_Link.position().top <= scrollPosition && ref_scroll_Link.position().top + ref_scroll_Link.height() > scrollPosition) {
$('ul li a').removeClass("active");
scroll_link.addClass("active");
}
else{
scroll_link.removeClass("active");
}
});
}
body {
margin: 0;
}
.toggle-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ccd2cc;
text-align: center;
}
.toggle-wrapper button {
background-color: #ED4C67;
color: #ffffff;
padding: 10px 20px;
border: 0;
cursor: pointer;
border-radius: 5px;
}
.toggle-wrapper button:active{
background-color: #B53471;
}
header {
background-color: #6C5CE7;
position: fixed;
top: 36px;
z-index: 99;
left: 0;
right: 0;
}
header ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
ul li {
flex: 1 100%;
display: flex;
justify-content: center;
}
.wrapper {
margin-top: 36px;
}
header a {
color: #ffffff;
padding: 15px;
display: block;
text-decoration: navajowhite;
text-transform: uppercase;
width: 100%;
text-align: center;
}
header a.active {
color: #000000;
background-color: #ffffff;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section.section1 {
background-color: #FFEAA7;
}
section.section2{
background-color:#FAB1A0;
}
section.section3{
background-color:#7F8C8D;
}
section.section4{
background-color:#4CD137;
}
section.section5{
background-color:#A3CB38;
}
section.section6{
background-color:#70A1FF;
}
section.section7{
background-color:#079992;
}
<div class="toggle-wrapper">
<button>Toggle</button>
</div>
<div class="wrapper" style="display: none;">
<header>
<ul>
<li><a class="active" href="#one">one</a></li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
</header>
<section class="section1" id="one">SECTION ONE</section>
<section class="section2" id="two">SECTION TWO</section>
<section class="section3" id="three">SECTION THREE</section>
<section class="section4" id="four">SECTION FOUR</section>
<section class="section5" id="five">SECTION FIVE</section>
<section class="section6" id="six">SECTION SIX</section>
<section class="section7" id="seven">SECTION SEVEN</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a website with expanding circles and text on top of that. The website was working fine, till I added the jquery fullpage.js plugin. Now, the expanding circles come on top of the text and covers it up entirely. I have tried giving the text a higher z-index and tried it both with absolute and relative positioning, but nothing seems to work. Can anyone help me out with this?
link to website: https://rimildeyjsr.github.io/spotify-circle-animation/
HTML:
<div id="fullpage">
<div class="section active" id="section1">
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="main-heading">
<span id="main-heading"></span>
</div>
<span id="welcome-msg">Welcome to my website</span>
</div>
<div class="section">
</div>
</div>
CSS:
.initial-div {
width: 1000px;
height: 1000px;
transform: scale(0);
}
.position-div{
position: absolute;
border-radius: 50%;
display: none;
}
.animate {
-webkit-animation: expand 2500s;
}
#-webkit-keyframes expand {
0%{
-webkit-transform: scale(0,0);
}
100%{
-webkit-transform: scale(100.0,100.0);
display: none;
}
}
.main-heading{
text-align:left;
z-index: 20;
position: relative;
display: block;
height:228px;
width:644px;
font-family: Graphik, Roboto;
font-size: 10em;
font-weight: 600;
letter-spacing: 0.2px;
color: #ffffff;
top: 23%;
left: 8%;
}
#welcome-msg {
display: block;
z-index: 20;
position: relative;
text-align: left;
font-size: 4em;
font-family: Graphik,Roboto;
color: #ffffff;
height: 198px;
width: 1138px;
font-weight: 600;
top: 24%;
left: 8%;
}
Jquery:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
function makeDiv(color){
var divsize = 1000;
//$('body').css({'background-color':bgColor});
console.log(1);
$newdiv = $('<div/>').addClass('initial-div').css({
'background-color': color
});
var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
var posy = (Math.random() * ($(document).height()) - (divsize / 2)).toFixed();
$newdiv.addClass('position-div').css({
'left':posx+'px',
'top':posy+'px'
}).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
$('#fullpage').fullpage({
anchors: ['home'],
fixedElements: '#toggle,#overlay'
});
$("#main-heading").delay(2000).css("visibility","visible").typed({
strings:["^1000Hello,","Bonjour,","Hola,","nuqneH,","Ola,","Hallo,","سلام"
,"Ciao,"],
typeSpeed: 300,
loop: true,
showCursor: true,
cursorChar: "|",
preStringTyped: function(){
$(".main-heading").css("visibility","visible");
},
onStringTyped: function(){
$('.button-launch').addClass("animated slideInDown").css("visibility","visible")
;
}
});
$('#toggle').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
$('#overlay ul li a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
//var arrayLength = colorArray.length;
var colorArray = ['#11256c','#24ccdf'];
var i= 0,flag=0;
var color = colorArray[i];
setInterval(function(){
flag++;
makeDiv(color);
if (flag == 15){
color = colorArray[i];
i++;
if (i == 2) {
i = 0;
}
flag=0;
}
},2000);
});
Link to github repository: https://github.com/rimildeyjsr/spotify-circle-animation
hello add this css in your file for remove applied CSS transformation and its work
#fullpage {
-webkit-transform: none !important;
transform: none !important;
}
In your case try this
#fullpage {
z-index: 2;
}
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>
I have 2 divs:
CSS
#home {
width: 1280px;
height: 1000px;
background: #000;
}
.step1 {
position: absolute;
margin-top: 100px;
margin-left: 500px;
}
.step1 a{
background: #AAF75A;
width: 100%;
line-height: 55px;
padding: 14px 49px;
text-decoration: none;
font-family: tahoma;
font-size: 20px;
}
#about {
position: absolute;
margin-left: 3000px;
width: 1280px;
height: 1000px;
background: #000;
}
HTML
<div id="home">
<article>
<div class="step1"><a class="move" href="#about">Let's go</a></div>
</article>
</div>
<div id="about">
<article>
<div class="step1"><a class="move" href="#home">Next !?</a></div>
</article>
</div>
and I want move from div id="home" to div id="about"
I have this
JS
$(function($){
$('a.move').click(function() {
var $this = $(this),
_href = $this.attr('href'),
dest = $(_href).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: dest}, 400 );
return false;
});
});
but it just goes down ... it doesn't move to the about div
You have to scroll to the left as well. Like this:
$(function ($) {
$('a.move').click(function () {
var $this = $(this),
_href = $this.attr('href'),
destX = $(_href).offset().top;
destY = $(_href).offset().left;
$('body').animate({
scrollTop: destX,
scrollLeft: destY
}, 400);
return false;
});
});
DEMO