fullPage.js with scroll inside sections & fixed element
fullPage.js with scroll inside sections & a fixed element also following the scroll.
HTML
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.min.js"></script>
<body>
<div id="fullpage">
<div id="fixed-elem" class="fixed-elem">
My fixed element
<br> My fixed element
<br> My fixed element
<br> My fixed element
<br> My fixed element
<br>
</div>
<div class="section">
<div class="intro">
<h1>Scrolling inside sections</h1>
<p>Easy and useful! Just make use of the option `scrollOverflow` for it and add the slimScroll plugin!
<br>
</p>
<p>Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea
an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte. Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem
saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui. Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem
aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur. Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu.
Eu enim laudem reformidans vel. Pro clita quando ad. Usu...
CSS
h1 {
font-size: 3em;
}
h2 {
font-size: 2.4em;
}
h1,
h2,
p {
color: white;
padding: 30px;
}
.fixed-elem {
position: fixed;
z-index: 500;
top: 100px;
right: 20px;
padding: 20px;
background-color: rgba(250, 250, 250, 0.5);
}
JavaScript
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#4A6FB1', '#939FAA', '#323539', '#49AAFF'],
scrollOverflow: true,
afterLoad: function(anchorLink, index) {
moveFixedElemToSlide(index);
}
});
function moveFixedElemToSlide(oneBasedIndex) {
var zeroBasedIndex = oneBasedIndex - 1;
var topDistance = $('.section:eq('+zeroBasedIndex+')').position().top + 100;
$('#fixed-elem').css({'top': topDistance});
}
});