I have a project that needs to be clicked on ABOUT and SERVICE to move to the specified article area, js-box1 and js-box2,
but I don’t know which part of the logic is wrong, and it fails to achieve the effect of sliding to the target area. So I would like to ask everyone to help, thank you.
Supplement
I've just been out on his own research can slide to a specified location, but I want to slide blocks are below the black line at about 20px!
But now when I click SERVICE, it will be some distance away from the black line. I don't know how to rewrite the code to meet my needs?
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target).offset().top - 300;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
})
})
.wrap {
width: 500px;
background-color: #ffc20e;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
ABOUT
SERVICE
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
</section>
</div>
</div>
Just add height: 490px; to .wrap .content .box2 class in css and you good to go!
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target).offset().top +400;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
});
})
.wrap {
width: 500px;
background-color: #ffc20e;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
height: 490px
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
ABOUT
SERVICE
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
</section>
</div>
</div>
Just like this example build by tcoloredbox of latex.
My problems are:
how to make the title, the Loi image part, be adjusted by sentence length?
how to make the position of the title, still the Loi image part, has a changeable position? Can pure css work this out?
if I want the title sentence be changed when I click/hover the title, how should I do that?
Ok, I have relaize that the math equations are indeed a problem, here is a new post about the problem:
The new post.
Something like this?
https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16
/* For demo only */
body {
padding: 60px;
}
/* Example */
.box {
position: relative;
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
}
.box:not(:last-child) {
margin-bottom: 40px;
}
.box__title {
position: absolute;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 30px;
border-radius: 8px;
background-color: #000;
padding: 0 6px;
}
.box__title--top-left {
top: -52px;
left: 10px;
}
.box__title--top-right {
top: -52px;
right: 10px;
}
.box__title--bottom-left {
bottom: -52px;
left: 10px;
}
.box__title--bottom-right {
bottom: -52px;
right: 10px;
}
<div class="box">
<h6 class="box__title box__title--top-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--top-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-left">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
<div class="box">
<h6 class="box__title box__title--bottom-right">This is a title</h6>
<p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p>
</div>
i have a problem.i want the last paragraph to be clear.in my code the last paragraph goes in below of div with position fixed and it's never shown.
div with class btn__container have position of fixed and bottom=0.so this element always stick to the bottom of the page.i want some how i can see the last element in my page.
this is my html & css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Roboto, sans-serif;
background-color: #eee;
direction: ltr;
}
main {
padding: 15px;
}
h1 {
text-align: center;
}
p {
margin-top: 20px;
text-align: justify;
}
.card__container {
display: flex;
}
.card {
background-color: deepskyblue;
color: #eee;
padding: 15px;
border-radius: 10px;
flex: 0 0 40%;
margin-top: 20px;
margin-left: 10px;
}
.card > p {
text-align: start;
}
.btn__container {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
display: flex;
justify-content: space-around;
background-color: lightgrey;
padding: 10px 0;
}
button{
border: 0;
outline: none;
color: #eee;
background-color: deepskyblue;
padding: 10px 0;
flex: 0 0 30%;
border-radius: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<h1>This is a test page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloremque enim nulla perferendis praesentium
quos temporibus voluptas voluptatem? Error, illum.</p>
<div class="card__container">
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut dignissimos doloremque esse impedit ipsam
itaque molestias obcaecati officia pariatur placeat praesentium quis rem rerum sit unde, vel vero?
Similique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, expedita?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque eius enim impedit laboriosam officiis
possimus repellendus sed tempore, voluptates voluptatibus. Adipisci at ea possimus? Architecto autem,
consequatur culpa cumque earum eligendi illo in maxime, minus nam neque perferendis placeat quasi rerum
voluptas? Alias est facilis natus quis tempora totam ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi facere unde. Eaque est quidem
quisquam quos repellendus tempora ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsa laudantium omnis reiciendis repellendus
repudiandae sed sit! Ad animi maiores nulla tempora ullam voluptas?</p>
<div class="btn__container">
<button>Cancel</button>
<button>More</button>
</div>
</main>
</body>
</html>
u have to use padding bottom for how much fixed div height that much u have to mention for main tag it will work its simple code try below code i have used 70px u can give ur fixed div height
main{
padding-bottom:70px
}
As can be seen in the running code; the navbar, on page scroll, is fixed at the top, changes its logo to a blue one and also has a white background.
On mobile, the menu should either slide down or appear smoothly without any lag on top of the content on mobile screens nicely.
I have been struggling to seamlessly animate the mobile menu slide-down and background-color smoothly without any lag on mobile devices. I have tried max-height to set the height of the navbar. Everything I have tried has resulted in lag on all mobile devices I have tested it with.
Honestly speaking, I have been unable to achieve that for two days. I have exhausted all methods and I am now frustrated. I don't know why it runs smoothly on desktops but heavily lags on mobile devices.
What can I do?
const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll', () => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixedNavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixedNavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click", () => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click", () => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if(!fixedNavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page container to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* Logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
#media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
</a>
</div>
<div class="page__menu home">
Menu 1
Menu 2
Menu 3
Menu 4
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>
It looks like the padding and height you set on the .scroll classes are making it jolt.
From these sections:
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
Is this how you want it?
const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll', () => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixedNavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixedNavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click", () => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click", () => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if (!fixedNavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page coontainer to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
height: 80px;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* Logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Naviagtion Container on scroll settings */
.page__navigation.scrolled {
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
#media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
</a>
</div>
<div class="page__menu home">
Menu 1
Menu 2
Menu 3
Menu 4
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>
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