I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out.
How to disable the scrolling of the content-wrapper.
How to only scroll the off canvas menu. Right now it scrolls the height of the website itself.
Here is a code pen to show you what issues I'm running into.
code pen demo
HTML
<div id="menu">
<h1>This is the push over menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias id accusantium, consequatur, repellendus iure impedit consectetur aspernatur quas quo. Doloremque, facere autem ex tempora dicta consequuntur, possimus minima natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quis voluptatibus, nesciunt debitis ea ullam consectetur illo cum odit nobis explicabo cumque, vitae quia dolores, fugit maxime ad nisi earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus dignissimos possimus, voluptatem ducimus illum voluptate deleniti et culpa autem laboriosam, pariatur voluptates enim facilis, animi nesciunt dolor expedita repellat.</p>
</div>
<div id="burger-icon">
<h2>burger menu</h2>
</div>
<div id="content-wrapper">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ullam, alias dignissimos dolore, a ratione dicta ipsam delectus facilis quod voluptates autem beatae sed impedit eligendi, consequuntur necessitatibus modi nemo?</p>
</div>
CSS
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
min-height: 100%;
z-index: 1000;
padding-top: 50px;
}
#burger-icon {
position:fixed;
top: 10px;
left: 10px;
color: yellow;
cursor: pointer;
z-index: 2000;
}
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
min-height: 200vh;
}
JS
var isOpen = false;
// sets the about off screen number
var aboutOffPosition = $("#menu").css("left");
//console.log($("#about").css("left"));
function openMenu() {
// console.log("burger clicked");
if(isOpen === false)
{
// slide over the about section
TweenMax.to($("#menu"),".75", {left:0, ease: Power1.easeIn});
// move over the content
TweenMax.to($("#content-wrapper"),1, {x:500, ease: Power1.easeIn});
isOpen = true;
}
else{
// slide back the about section
TweenMax.to($("#menu"),".75", {left:aboutOffPosition, ease: Power1.easeIn});
// move back the content
TweenMax.to($("#content-wrapper"),".5", {x:0, ease: Power1.easeIn});
isOpen = false;
}
}
// burger icon
$('#burger-icon').click(openMenu);
Thanks!
As far as I can understand you want to disable scroll of content-wrapper when menu is open and at the same time scroll should be enable for menu.
you just need to remove min-height from the #content-wrapper and set overflow to hidden to hide the scroll.
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
overflow:hidden;
}
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
height: auto;
z-index: 1000;
padding-top: 50px;
}
I was able to fix this by adding a container(.app) around the content and applying this css to the project.
body {
// scroll fix
height: 100%;
overflow: hidden;
// end scroll fix
}
.app {
// scroll fix
overflow-y: scroll;
height: 100vh;
// end scroll fix
}
#about {
height: 100vh;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
}
I updated the codepen to reflect these changes.
Related
I'm using accordions for my site (as seen in this video), but when I open a accordion, the accordion beside it opens as well and when I close it, the accordion beside it disappears 💀
I don't know why this happens.
(PS: ignore the snow that was just some testing)
var acc = document.getElementsByClassName("accordion-card");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
}
.accordion-card {
background-color: rgba(182, 210, 253, 0.041);
border-radius: 10px;
width: 30vw;
max-width: 385px;
min-width: 350px;
/*height: 70px;*/
border: 1px solid rgba(153, 196, 239, 0.121);
position: relative;
}
.accordion-header {
color: rgba(255, 255, 255, 0.841);
font-weight: 600;
font-size: 1.25rem;
padding: 1rem 1.5rem 0.8rem 1.3rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
/*border-bottom: 1px solid rgba(153, 196, 239, 0.121);*/
}
.accordion-content {
color: rgba(255, 255, 255, 0.658);
font-weight: 300;
font-size: 1rem;
/*padding-top: 1rem;*/
/*padding-bottom: 1rem;*/
padding-left: 1rem;
padding-right: 1.3rem;
line-height: 1.5em;
/* hide the content until shown */
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.accordion-header::after {
content: '\003E';
font-size: 2rem;
font-weight: 400;
position: absolute;
right: 1rem;
}
.accordion-card.active .accordion-content {
height: 150px;
padding: 1rem 1rem 1rem 1.3rem;
}
.accordion-card.active .accordion-header::after{
transform: rotate(90deg);
transition: ease-in-out 0.5s;
}
<div class="accordion-wrapper">
<div class="accordion-card">
<div class="accordion-header">
Card 1
</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 2</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 3</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 4</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 5</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 6</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
</div>
I expected only the accordion I opened to open, not others beside it. Also, if any of you guys could help me solve the problem of them disappearing unexpectedly, that would be a great help.
There are 2 problems in you code:
I'm not sure why you are toggling the visibility of the next Sibling element in JS. This is what causes the blocks to disappear.
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
Removing this part of the code now resolves the blocks disappearing.
The blocks now stop disappearing, but they still "open". They don't really open they just stretch their titles, because of the CSS Flex. There is easy CSS solution for that:
.accordion-card {
max-height: 70px;
}
.accordion-card.active {
max-height: none;
}
We fix the max-height to 70px for all, so they don't get enlarged. and remove the max height for the active one. Then only the active one will have full height.
Here is a working JS Filled example with all the changes.
https://jsfiddle.net/s612pbmk/1/
So basically I want to resize my image depending on the available space of the container. I have a description and an image, and the image should resize depending on the amount of text in the description and not just push it upwards as it does for me now. In this project, I'm using react.
Default result if the description is small:
Unwanted result if the description is large:
Desired resault if the description is large:
My current code:
<div className={classes["main-post-container"]}>
<img className={classes["main-image"]} src={test} alt="test" />
<p className={classes["main-description"]}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus illo
enim magnam neque fugit rem praesentium voluptate quod architecto aut
non, id fugiat modi tempora hic sed amet, eligendi delectus. Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Temporibus obcaecati
dolore mollitia animi praesentium laudantium sit cumque exercitationem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima
pariatur quae id et officiis repellat doloribus, beatae ducimus quaerat
repellendus nesciunt aliquid dolorem recusandae vero officia! Pariatur,
voluptatem fugiat. .
</p>
</div>
CSS:
.main-post-container {
width: 70%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 3rem;
}
.main-image {
max-height: 450px;
max-width: 800px;
object-fit: fill;
flex-grow: 1;
}
.main-description {
font-weight: 900;
font-size: 1rem;
flex-grow: 3;
}
Try this css class:
.main-image {
max-height: 450px;
max-width: 800px;
object-fit: fill;
flex-grow: 1;
height: auto
}
How can I add custom text under each image when it's zoomed in? Now it is based on the alt text, but I want to customize it even more with images etc.
The perfect solution would be if the text was displayed in a div.
Here is the codepen:
// Create a lightbox
(function() {
var $lightbox = $("<div class='lightbox'></div>");
var $img = $("<img>");
var $caption = $("<p class='caption'></p>");
// Add image and caption to lightbox
$lightbox
.append($img)
.append($caption);
// Add lighbox to document
$('body').append($lightbox);
$('.lightbox-gallery img').click(function(e) {
e.preventDefault();
// Get image link and description
var src = $(this).attr("src");
var cap = $(this).attr("alt");
// Add data to lighbox
$img.attr('src', src);
$caption.text(cap);
// Show lightbox
$lightbox.fadeIn('fast');
$lightbox.click(function() {
$lightbox.fadeOut('fast');
});
});
}());
body{
background: linear-gradient(to bottom right, #b81d1d, #5F554C, #E4DFD8);
font-family: "Open Sans", sans-serif;
}
.container{
max-width: 800px;
margin: 5% auto;
padding: 20px;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}
.text-center{
text-align: center;
margin-bottom: 1em;
}
.lightbox-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.lightbox-gallery div > img {
max-width: 100%;
display: block;
}
.lightbox-gallery div {
margin: 10px;
flex-basis: 180px;
}
#media only screen and (max-width: 480px) {
.lightbox-gallery {
flex-direction: column;
align-items: center;
}
.lightbox > div {
margin-bottom: 10px;
}
}
/*Lighbox CSS*/
.lightbox{
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
position: fixed;
top: 0;
left: 0;
z-index: 20;
padding-top: 30px;
box-sizing: border-box;
}
.lightbox img{
display: block;
margin: auto;
}
.lightbox .caption{
margin: 15px auto;
width: 50%;
text-align: center;
font-size: 1em;
line-height: 1.5;
font-weight: 700;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="text-center">Lightbox Gallery</h2>
<div class="lightbox-gallery">
<div><img src="http://placehold.it/300/f1b702/fff&text=image1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quae, quam. Ut dolorum quia, unde dicta at harum porro officia obcaecati ipsam deserunt fugit dolore delectus quam, maxime nisi quo."></div>
<div><img src="http://placehold.it/300/d2f1b2/222&text=image2" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime accusamus officiis dignissimos doloribus consectetur harum eos sapiente optio aut minima."></div>
<div><img src="http://placehold.it/300/eee/000&text=image3" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veritatis similique, amet, maiores soluta recusandae cupiditate, sed perspiciatis fugit minima, sunt dolores cum earum deserunt illo ipsum!"></div>
<div><img src="http://placehold.it/300/222/fff&text=image4" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium dignissimos tenetur eos unde quidem repellat officiis nemo laboriosam necessitatibus deleniti commodi quis aliquid est atque tempora aut, nihil!"></div>
<div><img src="http://placehold.it/300/b47f99/000&text=image5" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto minus consequatur soluta quaerat itaque, laboriosam quis a facilis, cumque, deleniti quas aperiam voluptate dolore. Enim nostrum sit eaque, porro eligendi illo placeat?"></div>
<div><img src="http://placehold.it/300/e1d400/000&text=image6" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi suscipit quam, id aliquam totam aperiam quas rem debitis voluptatem pariatur, illo accusamus facilis eius ipsa! Reprehenderit libero, quas iste repudiandae distinctio, quos dignissimos."></div>
</div>
</div>
Codepen URL: http://codepen.io/lkfmarketing/pen/XMdNEP
You can add a hidden div and grab the text with jQuery.
<div class="js-text text">Test</div>
var txt = $(this).parent().find('.js-text').text()
Forked example
I think for this you could use data attributes:
<div><img id="myImg" src="http://placehold.it/300/f1b702/fff&text=image1" alt="my alt" data-caption="my Caption or whatever you want"></div>
And then you use this in js as follows
var myCaption = $('#myImg').data('caption');
// use this as you please
Regards
How can I change the default slide in direction of the navigation menu when the toggle icon ("hamburger icon") is pressed?
I would like to achieve an effect similar to the one www.shopify.com is using on mobile version of their website: http://d.pr/v/1iEUF (here is a short video presentation of what I am trying to achieve).
Thank you very much in advance.
Here is the way to build that style
JS
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
});
});
I already reupdated the demo, the effect that you wanted i already get the way u posted before.
DEMO
Here is your fiddle
https://jsfiddle.net/sesn/t2h1ya1z/
If you spend some more time, the code can be optimized to minimum number of lines.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="slidemenu">
<a class="close">X</a>
<ul class="nav navbar-nav">
<li class="active">
Menu
</li>
<li>
Menu
</li>
<li>
Menu
</li>
</ul>
</div>
</div>
</div>
<div id="page-content">
<div class="container">
<h1 class="no-margin-top">Left Sidebar menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
</div>
</div>
CSS
body.slide-active {
overflow-x: hidden
}
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 17px 0 0 0;
border: 0;
background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: #CC0F0F;
color: #CC0F0F;
}
.navbar-header {
position: relative
}
.navbar.navbar-fixed-top.slide-active {
position: relative
}
#media (max-width: 767px) {
#slide-nav .container {
margin: 0 !important;
padding: 0 !important;
height: 100%;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
margin-top: 40px;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
#navbar-height-col {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
background: #f7f7f7;
}
#navbar-height-col.inverse {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
#slidemenu .close {
color: white;
margin: 10px;
}
}
#media (min-width: 768px) {
#page-content {
left: 0 !important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0 !important
}
}
Js
$(document).ready(function() {
$('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
$('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));
var slidewidth = '20%';
var navbarneg = '-' + slidewidth;
if ($(window).width() < 767) {
$('#navbar-height-col').css("width", slidewidth);
$('#navbar-height-col').css("left", navbarneg);
$('#slide-nav #slidemenu').css("width", slidewidth);
$('#slide-nav #slidemenu').css("left", navbarneg);
}
$('#slidemenu .close').on('click', function() {
var selected = $('#slidemenu').hasClass('slide-active');
$('#slidemenu, .navbar-toggle, .navbar-header').toggleClass('slide-active');
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
$('.inverse').stop().animate({
left : selected ? navbarneg : '0px'
});
//alert(1);
});
$("#slide-nav").on("click", '.navbar-toggle', function(e) {
// slider is active
var selected = $(this).hasClass('slide-active');
// set slidemenu width
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
// set navbar width
$('#navbar-height-col').stop().animate({
left : selected ? navbarneg : '0px'
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('.navbar, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu .navbar, .navbar-header';
$(window).on("resize", function() {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});
The screen jump to next screen when set $.fn.fullpage.setAutoScrolling(true); Is there option in fullPage.js to avoid with onStart or something like that ?
To set $.fn.fullpage.setAutoScrolling(false); working fine with the condition of if (index == 3 && direction == 'down') but very unfortunately $.fn.fullpage.setAutoScrolling(true); not working when scroll up.
Demo: http://codepen.io/athimannil/pen/XKWzOX
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(anchorLink, index, direction) {
if (index == 3 && direction == 'down') {
$.fn.fullpage.setAutoScrolling(false);
$.fn.fullpage.setFitToSection(false);
} else {
$.fn.fullpage.setAutoScrolling(true);
$.fn.fullpage.setFitToSection(true);
}
},
});
body {
margin: 0;
padding-bottom: 100px !important;
}
.section {
text-align: center;
font-size: 3em;
}
.content {
margin: 50px
}
footer {
height: 100px;
background-color: tomato;
color: white;
width: 100%;
padding: 10px 0;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: -3;
}
p {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div class="section">Three</div>
</div>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aperiam incidunt sunt recusandae sint impedit. Eos est ducimus, saepe nobis nesciunt laboriosam officia voluptatibus, totam corporis deserunt at, mollitia iste!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae magni illo facilis, nemo repellat laudantium sequi incidunt odio fugit quibusdam optio dicta, amet, fugiat cumque? Aut eos esse autem, nobis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores accusantium soluta debitis aliquam earum enim a libero sapiente porro voluptatibus, voluptas dolor saepe deleniti ut tempora ipsam reprehenderit facilis rem.</p>
</footer>
Not 100% sure what you are trying to achieve, but I figure, you want your fixed footer to be visible after scrolling the third slide.
I would just ad a 4th transparent slide and wouldn't mess with the basic functionality of the slider/scroller because of the unexpected behavior.
<div class="section"></div> <!-- adding a 4th section to my HTML -->
<script>
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', 'transparent']
});
</script>
my codepen example