Here's a little code I wrote that would not use fullpage.js
I want to change it to scrollTop instead of position relative and "top": -_.index() * 100 + "%" with overflow:hidden
Please tell me how to do it. I attached the top menu (header-bg) and a search-wrapper.
New JSFiddle
JQuery:
$(document).ready(function() {
onLoad();
NavAnimation();
DesktopResize();
$("body").css({
overflow: 'hidden'
});
/*$(window).bind('scroll', function() {
if ($(window).scrollTop() > 726) {
$('.search-wrapper').addClass('fixed');
}
else {
$('.search-wrapper').removeClass('fixed');
}
}); */
});
function DesktopResize(){
$(".section, .fullpage, html, body").css({
height: '100%',
width: '100%'
});
}
function NavAnimation(){
scroll.call(active, true);
}
var active = null;
function scroll(silent){
var _;
if (active === null) {
_ = $(".section").first();
} else {
active.removeClass("active");
_ = $(this);
}
if (_.length === 0) return;
if (active !== null || silent === false) {
$(".fullpage").animate({"top": -_.index() * 100 + "%"}, 1000);
}
active = _;
}
function onLoad() {
$(".navigation li").click(scroll);
scroll();
}
var wheel = true;
window.addEventListener('wheel', function(event) {
if (wheel) {
wheel = false;
if (event.deltaY > 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
window.addEventListener('mousewheel', function(event) {
if (wheel) {
wheel = false;
if (event.wheelDelta < 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
HTML:
<div class="header-bg">
<div class="header-content">
<div class="navigation">
<ul>
<li id="NavWho">Rules</li>
<li id="NavMission">Arrivante Miles</li>
<li id="NavApproach">Prices</li>
</ul>
</div>
</div>
</div>
<div id="fullpage" class="fullpage">
<div class="section">
<br>
<br><br>
<br>
<div class="search-wrapper">
<div class="explain">Type your initial<br> flight number here:</div>
<div class="input">
<input type="text" placeholder="Example: FR22">
</div>
<div class="button">
<button class="search">Book transfer</button>
</div>
</div>
</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
CSS:
html, body {
background: #d8e6e3;
position: relative;
}
.section{
height: 100% !important;
width: 100%;
}
.header-bg{
background: #242928;
color: #879996;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 500;
}
.header-bg .header-content{
max-width: 1800px;
margin: 0 auto;
font-family: "HelveticaNeue-roman";
text-transform: uppercase;
}
.header-content .login{
background: url("../image/login-ico.png") no-repeat;
background-position: 0 0;
height: 15px;
width: auto;
padding: 0px 0 0 35px;
margin: 25px 0 0 30px;
float: left;
cursor: pointer;
}
.header-content .navigation{
margin: 0 auto;
max-width: 486px;
}
.header-content .navigation ul{
list-style-type: none;
font-size: 0;
}
.header-content .navigation ul li{
display: inline-block;
font-size: 14px;
padding: 25px 25px 25px 25px;
cursor: pointer;
}
.fullpage{
position: relative;
}
.section{
padding: 66px 0 0 0;
margin: 0 auto;
max-width: 1800px;
}
.section .header-image{
position: relative;
}
.section .header-image .header-bg-image{
width: 100%;
height: 659px;
background: url("../image/head-1.jpg") no-repeat;
background-position: center center;
background-size: cover;
}
.section .header-image .main-logo{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -120px;
}
.section .search-wrapper{
font-size: 0;
position: relative;
}
.search-wrapper .explain,
.search-wrapper .input,
.search-wrapper .button{
display: inline-block;
vertical-align: top;
}
.search-wrapper .explain{
padding: 26px 0 22px 24px;
font-family: "HelveticaNeue-roman";
font-size: 14px;
line-height: 16px;
color: #586664;
text-transform: uppercase;
background: #fffce5;
width: calc(20% - 24px);
}
.search-wrapper .input{
width: 60%;
font-size: 14px;
}
.search-wrapper .input input{
border: none;
padding: 26px 0 11px 26px;
font-size: 36px;
line-height: 36px;
color: #bcccc9;
width: calc(100% - 26px);
font-family: "HelveticaNeue-thin";
}
.search-wrapper .button{
width: 20%;
height: 100%;
font-size: 14px;
font-family: "HelveticaNeue-roman";
}
.search-wrapper .button .search{
font-family: "HelveticaNeue-roman";
font-size: 32px;
line-height: 32px;
color: #fff;
background: #ff4255;
width: 100%;
height: 80px;
border: none;
cursor: pointer;
outline: none;
}
OK still not really sure what you exactly want but have a look here:
$(document).ready(function () {
$(".navigation li").click(function () {
activeSection = $(this).index();
scrollMeToSection();
});
var activeSection = 0;
var wheel = true;
function scrollMeToSection() {
$('body').animate({
scrollTop: ($(window).height() * activeSection)
}, '1000', 'swing', function () {
// can do something when finishes animating here.
});
}
$(window).on('mousewheel DOMMouseScroll', function (event) {
console.log(event);
event.preventDefault();
event.stopPropagation();
if (wheel) {
wheel = false;
var goingUp = event.originalEvent.deltaY > 0 ? false : true;
if (activeSection === 0 && goingUp) {
wheel = true;
return;
}
activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
if (activeSection == $('.section').length) {
activeSection = $('.section').length - 1;
}
scrollMeToSection();
setTimeout(function () {
wheel = true;
}, 1000);
}
});
});
Demo:http://jsfiddle.net/robschmuecker/yYJ3z/
This works on mousewheel scroll but not on scroll-bar scroll (which is a more than somewhat complex process to manage).
Related
I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>
Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});
The animation i've put together is firing when it scrolls into view, but it's firing on every scroll and not just once. In my local version adding $(window).off('scroll'); stops the multiple firing of the function, but breaks other scroll animations I have running separately.
I'm not sure what i've missed here so any help would be great : )
$(document).ready(function ($) {
function animateStatsBarVertical() {
$('.progress-vertical--container').each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if ( elementPos < topOfWindow + $(window).height() - 30 ) {
function statsBarVertical() {
var stats = document.getElementById("stats");
var percentage = document.getElementById("percentage");
var height = 1;
var id = setInterval(frame, 10);
var results_percentage_verticle = '<?php the_field("results_percentage_verticle", $p); ?>';
function frame() {
if (height >= results_percentage_verticle) {
clearInterval(id);
} else {
height++;
stats.style.height = height + '%';
percentage.innerHTML = height * 1 + '%';
}
}
}
statsBarVertical();
}
});
}
animateStatsBarVertical();
$(window).scroll(animateStatsBarVertical);
});
.progress-vertical--container {
position: absolute;
left: 15px;
bottom: 200px;
width: 100px;
text-align: center;
}
.progress-vertical--container .stats-info {
max-width: 85px;
width: 100%;
margin: 0 auto 10px;
}
.progress-vertical--container .info {
font-size: 0.875em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: green;
text-transform: lowercase;
text-align: center;
width: 100%;
line-height: 14px;
}
.progress-vertical--container .progress-vertical {
width: 40px;
height: 300px;
background-color: grey;
margin: 0 auto;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#stats {
width: 100%;
height: 1%;
text-align: center;
line-height: 30px;
color: red;
background-color: #d04e7c;
}
#percentage {
font-size: 2em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: #ffffff;
text-transform: lowercase;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background:red;height:2000px;position: relative;">
<div class="progress-vertical--container">
<!-- progress-vertical container : BEGIN -->
<div class="stats-info">
<div id="percentage"></div>
<div class="info">This is a test</div>
</div>
<div class="progress-vertical">
<div id="stats"></div>
</div>
</div>
<!-- progress-vertical container : END -->
</body>
You can just add a field to track if your animation event has fired or not. Once its fired for the first time, set this field to true and stop it from firing again.
$(document).ready(function ($) {
// Tracks if we're fired the event
let fired = false;
function animateStatsBarVertical() {
$('.progress-vertical--container').each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
// Only true if the element is in view AND has not fired yet
if ( elementPos < topOfWindow + $(window).height() - 30 && fired === false) {
// We've fired, so set to true
fired = true;
function statsBarVertical() {
var stats = document.getElementById("stats");
var percentage = document.getElementById("percentage");
var height = 1;
var id = setInterval(frame, 10);
var results_percentage_verticle = 100; // '<?php the_field("results_percentage_verticle", $p); ?>';
function frame() {
if (height >= results_percentage_verticle) {
clearInterval(id);
} else {
height++;
stats.style.height = height + '%';
percentage.innerHTML = height * 1 + '%';
}
}
}
statsBarVertical();
}
});
}
animateStatsBarVertical();
$(window).scroll(animateStatsBarVertical);
});
.progress-vertical--container {
position: absolute;
left: 15px;
bottom: 200px;
width: 100px;
text-align: center;
}
.progress-vertical--container .stats-info {
max-width: 85px;
width: 100%;
margin: 0 auto 10px;
}
.progress-vertical--container .info {
font-size: 0.875em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: green;
text-transform: lowercase;
text-align: center;
width: 100%;
line-height: 14px;
}
.progress-vertical--container .progress-vertical {
width: 40px;
height: 300px;
background-color: grey;
margin: 0 auto;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#stats {
width: 100%;
height: 1%;
text-align: center;
line-height: 30px;
color: red;
background-color: #d04e7c;
}
#percentage {
font-size: 2em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: #ffffff;
text-transform: lowercase;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background:red;height:2000px;position: relative;">
<div class="progress-vertical--container">
<!-- progress-vertical container : BEGIN -->
<div class="stats-info">
<div id="percentage"></div>
<div class="info">This is a test</div>
</div>
<div class="progress-vertical">
<div id="stats"></div>
</div>
</div>
<!-- progress-vertical container : END -->
</body>
I am new to jQuery and javascript and I am working on some animations to practice my new skills. The following code is a simple slider that cycles through 4 slides with setInterval() and can also be navigated on click. The slider works fine except for when the first or last slide is active and the buttons are clicked. In this case, the slider shows a blank slide before cycling back. I tried to manipulate the ul on click when the margin-left is equal to -2880px, without any success. Here is my code:
var i = 0;
$(document).ready(function() {
setInterval(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
i++;
if( i === 4 ) {
i = 0;
$("#my-slider").css("margin-left", 0);
}
});
}, 5000);
})
$(document).ready(function() {
$(".right").click(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000);
});
$(".left").click(function() {
$("#my-slider").animate({"margin-left": "+=720px"}, 1000);
});
});
.slider-wrapper {
width: 50%;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.slider-wrapper ul {
list-style-type: none;
width: 3600px;
max-width: 3600px;
height: 400px;
padding: 0;
margin: 0;
}
.slider-wrapper li {
float: left;
width: 720px;
height: 400px;
}
#slide1 {
background: #04151F;
}
#slide2 {
background: #183A37;
}
#slide3 {
background: #EFD6AC;
}
#slide4 {
background: #C44900;
}
#slide5 {
background: #04151F;
}
.left, .right {
font-size: 40px;
z-index: 1;
position: fixed;
float: right;
margin: -15% 0 0 0.5%;
cursor: pointer;
color: #FFF;
}
.right {
margin-left: 47%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrapper">
<ul id="my-slider">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
<li id="slide4"></li>
<li id="slide5"></li>
</ul>
<p class="left">←</p>
<p class="right">→</p>
</div>
Thank you for your help.
I Think it`s the simplest solution!
https://jsfiddle.net/nbLz6zzb/1/
var i = 0;
$(document).ready(function() {
setInterval(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
i++;
if( i === 4 ) {
i = 0;
$("#my-slider").css("margin-left", 0);
}
});
}, 5000);
/////////////////////////////////////
$(".right").click(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
i++;
if( i === 4 ) {
i = 1;
$("#my-slider").css("margin-left", 0);
}
});
});
$(".left").click(function() {
if ( $("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') {
$("#my-slider").animate({"margin-left": "-2880px"}, 1000);
} else {
$("#my-slider").animate({"margin-left": "+=720px"}, 1000);
}
});
});
.slider-wrapper {
width: 50%;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.slider-wrapper ul {
list-style-type: none;
width: 3600px;
max-width: 3600px;
height: 400px;
padding: 0;
margin: 0;
}
.slider-wrapper li {
float: left;
width: 720px;
height: 400px;
}
#slide1 {
background: #04151F;
}
#slide2 {
background: #183A37;
}
#slide3 {
background: #EFD6AC;
}
#slide4 {
background: #C44900;
}
#slide5 {
background: #04151F;
}
.left, .right {
font-size: 40px;
z-index: 1;
position: fixed;
float: right;
margin: -15% 0 0 0.5%;
cursor: pointer;
color: #FFF;
}
.right {
margin-left: 47%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrapper">
<ul id="my-slider">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
<li id="slide4"></li>
<li id="slide5"></li>
</ul>
<p class="left">←</p>
<p class="right">→</p>
</div>
You need to use the code from your cycle for the buttons as well.
$(document).ready(function() {
$(".right").click(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
i++;
if( i === 4 ) {
i = 0;
$("#my-slider").css("margin-left", 0);
}
});
});
Currently there are circles at the bottom that can be used to navigate between slides. I would like to add next and previous arrows to the sides that the user can click on to proceed forwards or back through the slides.
CSS:
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
JavaScript:
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
Here is the JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/
I would like to learn this for personal experience, otherwise I would just use a plugin like WowSlider. If it's easier to do this by building a new slider from scratch then any links to resources explaining how to accomplish this would also be appreciated.
This is an approach with arrows, just tweak with the design.
In the HTML I added the correspoding arrows, and in the JS I added the EventListeners and the function goToPreviousItem() at the end.
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
document.querySelector('#previous').addEventListener('click', goToPreviousItem, false);
document.querySelector('#next').addEventListener('click', goToNextItem, false);
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
//startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToPreviousItem() {
removeActiveLinks();
if(activeLink == 0) {
activeLink = links.length - 1;
} else {
activeLink--;
}
var newLink = links[activeLink];
changePosition(newLink);
}
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#outsideContainer {
width: 600px;
}
#previous {
width: 50px;
display: inline-block;
text-align: center;
float: left;
margin-top: 150px;
}
#next {
width: 50px;
display: inline-block;
text-align: center;
float: right;
margin-top: 150px;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
display: inline-block;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 600px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
border:rgba(255,255,255,0.9) 1px solid;
box-shadow: 0 0 4px #fff;
}
#navLinks ul li:hover {
background-color: #FFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.6) 1px solid;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
outline-width: 1px;
}
#navLinks ul li.active:hover {
background-color: rgba(255,255,255,0.7);
color: #FFFFFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.9) 1px solid;
}
#itemOne {
background-color: #000;
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-color: #fff;
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-color: #fff;
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-color: #fff;
background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif");
}
<div id="outsideContainer">
<div id="previous"><<</div>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content"></div>
<div id="itemTwo" class="content"></div>
<div id="itemThree" class="content"></div>
<div id="itemFour" class="content"></div>
</div>
</div>
<div id="next">>></div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
I dont want my li list to disappear while the new menu (menu.fixed) appears! I just want'em to follow the fixed menu down! how do i fix this? Here is the jquery:
var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if(scrollY > menuTop) {
if(menuClone.parent().length === 0) {
menuClone.appendTo($('.menu').parent());
}
} else if(menuClone.parent().length > 0) {
menuClone.remove();
}
});
And this the relevant css:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
height: 50px;
width:76.8%;
margin-left: 11.55%;
border-bottom: 2px solid #756B6B ;
}
li {
float: right;
margin-left:40px;
list-style: none;
position:relative;
padding-bottom: 10px;
}
and the html
<div class="menu">
<ul>
<li id="sistaord">ovrigt</li>
<li id="jobberfarenhet">Jobberfarenhet</li>
<li>Utbildning</li>
</ul>
</div>
Probably you don't need to clone menu. You only need to switch class "fixed" for the menu element:
HTML the same,
CSS:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
padding-bottom: 10px;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
}
li {
float: right;
margin-left:40px;
list-style: none;
}
JS:
var menu = $('.menu');
var menuTop = menu.offset().top;
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if (scrollY > menuTop) {
if (!menu.data('fixed')) {
menu.addClass('fixed').data('fixed', true);
}
} else if (menu.data('fixed')) {
menu.removeClass('fixed').data('fixed', false);
}
});
Here is a demo