Scroll to show footer - javascript

I have been trying to use parallax, to hide and show footer on scroll but due to the fact it targets the img this does not work.
i wrote this but it just pops up rather then the main content page sliding up to reveal the footer slowly.
SCRIPT
$(window).on('scroll', function() {
if ($(window).scrollTop() > 85) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
here is any example: http://red-team-design.com/simple-and-effective-dropdown-login-box/
scroll to bottom to see the footer slide out.
Is there a pure css way of doing it? am i missing a trick here.
Thanks for your help
FIDDLE
https://jsfiddle.net/7uv2fzvp/2/

Yes, that's pure css.
Just need to put that position: fixed and z-index: 0, so like:
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
and the main content position: relative and z-index: 1
.main-content {
position: relative;
z-index: 1;
}
Here is the jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Demo on JSFiddle
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('footer').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('footer').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
* {
margin: 0;
padding: 0;
}
body {
font: 15px/1.3 'PT Sans', sans-serif;
color: #5e5b64;
position: relative;
z-index: 0;
}
a,
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section,
footer,
header,
aside {
display: block;
}
#main {
position: relative;
z-index: 1;
background-color: #fff;
padding: 120px 0 600px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
#main .tzine-logo {
width: 336px;
height: 121px;
margin: 0 auto 90px;
text-indent: -999px;
overflow: hidden;
display: block;
}
h1 {
font: bold 48px 'PT Sans Narrow', sans-serif;
color: #5e5b64;
text-align: center;
padding-bottom: 300px;
position: relative;
}
h1:after {
content: '';
width: 45px;
height: 70px;
position: absolute;
left: 50%;
bottom: -85px;
margin-left: -23px;
}
footer {
height: 245px;
color: #ccc;
font-size: 12px;
position: relative;
z-index: -2;
background-color: #31353a;
}
footer > ul {
width: 960px;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -480px;
padding-bottom: 60px;
z-index: -1;
}
footer > ul > li {
width: 25%;
float: left;
}
footer ul {
list-style: none;
}
footer > ul > li ul li {
margin-left: 43px;
text-transform: uppercase;
font-weight: bold;
line-height: 1.8;
}
footer > ul > li ul li a {
text-decoration: none !important;
color: #7d8691 !important;
}
footer > ul > li ul li a:hover {
color: #ddd !important;
}
footer p {
width: 90%;
margin-right: 10%;
padding: 9px 0;
line-height: 18px;
background-color: #058cc7;
font-weight: bold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
opacity: 0.9;
cursor: default;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
footer > ul > li:hover p {
opacity: 1;
}
footer p:before {
content: '';
display: inline-block;
width: 16px;
height: 18px;
margin: 0 12px 0 15px;
vertical-align: text-bottom;
}
/*-------------------------
The different colors
--------------------------*/
footer p.home {
background-color: #0096d6;
background-image: -webkit-linear-gradient(top, #0096d6, #008ac6);
background-image: -moz-linear-gradient(top, #0096d6, #008ac6);
background-image: linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before {
background-position: 0 -110px;
}
footer p.services {
background-color: #00b274;
background-image: -webkit-linear-gradient(top, #00b274, #00a46b);
background-image: -moz-linear-gradient(top, #00b274, #00a46b);
background-image: linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before {
background-position: 0 -129px;
}
footer p.reachus {
background-color: #d75ba2;
background-image: -webkit-linear-gradient(top, #d75ba2, #c75496);
background-image: -moz-linear-gradient(top, #d75ba2, #c75496);
background-image: linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before {
background-position: 0 -89px;
}
footer p.clients {
background-color: #e9ac40;
background-image: -webkit-linear-gradient(top, #e9ac40, #d89f3b);
background-image: -moz-linear-gradient(top, #e9ac40, #d89f3b);
background-image: linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before {
background-position: 0 -69px;
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://cdn.tutorialzine.com/misc/enhance/v2.js"></script>
<div id="main">
<h1>slide-out footer.</h1>
</div>
<footer>
<ul>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
</ul>
</footer>
There is a very good article that explains z-indexes in detail, which I highly recommend that you read before continuing further.

Well, Here is a codepen for you that i found.
https://codepen.io/cerebrovinny/pen/vYdJJVa
HTML:
Scroll down and say hello to the slide-out footer
<footer><p>Here i am. Ready to use me for navigation lists or other content.</p></footer>
CSS
* {margin:0; padding:0; font-family: Helvetica; font-weight:bold; font-size: 1.4em;text-align:center;}
section {width:100%; height:1024px; margin: 0 0 360px 0;background-color:#ececec; position:relative; z-index:2; color: #1e2024;}
footer {width:100%; height:360px;background-color:#262932; position:fixed; bottom:0; left:0; color: #ef4a4a; text-align:center; z-index:0;}
p {padding: 1em 4em;}

Related

Navigation bar sticks out a bit even when hidden

New coder here, im trying to create a navigation bar that gets hidden on scroll-down and pops back down when i scroll-up. I followed this video tutorial, and it works, but when the navigation bar is supposed to be hidden, theres still a bit left on the screen. Any help would be appreciated.
The issue can be recreated by scrolling up and down on the code snippet.
// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
;
}
.noscroll::-webkit-scrollbar {
display: none;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/home banner.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.navbar {
width: 100%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: all 300ms ease-in-out;
background-color: red;
}
.logo {
width: 120px;
cursor: pointer;
color: white;
margin-left: 115px;
}
.logo h1 {
text-decoration: underline;
text-decoration-color: #B575B3;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar ul li::after {
content: '';
height: 3px;
width: 0;
background: #89D7FF;
position: absolute;
left: 0;
bottom: -5px;
transition: 0.3s;
}
.navbar ul li:hover::after {
width: 100%;
}
.scroll-down header {
transform: translate3d(0, -100%, 0);
}
.scroll-up header {
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
.banner2 {
width: 100vw;
height: 1000vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/1560126.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">
<body class="noscroll">
<div class="banner" id="Home">
<div class="navbar">
<header class="navbar">
<h1 class="logo" style="font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
<ul>
<li>Home</li>
<li>Networks</li>
<li>Issues and Communication</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="banner2"></div>
<script src="main.js"></script>
<script>
const body = document.body;
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset
if (currentScroll <= 0) {
body.classList.remove("scroll-up")
}
if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
body.classList.remove("scroll-up")
body.classList.add("scroll-down")
}
if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
body.classList.remove("scroll-down")
body.classList.add("scroll-up")
}
lastScroll = currentScroll;
})
</script>
</body>
</html>
Navbar should hide not header. Change it
.scroll-down header {
transform: translate3d(0, -100%, 0);
}
to it
.scroll-down .navbar {
transform: translate3d(0, -100%, 0);
}
// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e){
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior : "smooth"
});
});
});
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;;
}
.noscroll::-webkit-scrollbar {
display: none;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url("../Images/home banner.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.navbar{
width: 100%;
margin: auto ;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: all 300ms ease-in-out;
background-color: red;
}
.logo {
width: 120px;
cursor: pointer;
color: white;
margin-left: 115px;
}
.logo h1 {
text-decoration: underline;
text-decoration-color: #B575B3;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar ul li::after{
content: '';
height: 3px;
width: 0;
background: #89D7FF;
position: absolute;
left: 0;
bottom: -5px;
transition: 0.3s;
}
.navbar ul li:hover::after {
width: 100%;
}
.scroll-down .navbar {
transform: translate3d(0, -100%, 0);
}
.scroll-up header {
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">
<body class="noscroll" style="height:10000px;">
<div class="banner" id="Home">
<div class="navbar">
<header class="navbar">
<h1 class="logo" style= "font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
<ul>
<li>Home</li>
<li>Networks</li>
<li>Issues and Communication</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<script src="testjs.js"></script>
<script>
const body = document.body;
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset
if (currentScroll <= 0) {
body.classList.remove("scroll-up")
}
if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
body.classList.remove("scroll-up")
body.classList.add("scroll-down")
}
if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
body.classList.remove("scroll-down")
body.classList.add("scroll-up")
}
lastScroll = currentScroll;
})
</script>
</body>
</html>
You have two tag with class navbar, a div and a header, but your class that hide your navbar only select header so you have two solution :
remplace you scroll-up and scroll-down css to :
.scroll-down .navbar{
transform: translate3d(0, -100%, 0);
}
.scroll-up .navbar{
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
or remove class navbar from div

Changing Header/Navbar Elements on Scroll

Currently struggling to add the .is-active class to my header via javascript. If you add "is-active" to the header classes it works well. But I can't seem to work it out in javascript.
I just want the class to be added as soon as you start scrolling, and then removed when returning to the top.
Appreciate all the help!
HTML:
<header class="header">
<div class="header-nav flex container">
<figure class="header-logo">
<a href="#">
<img class="header-logo-light" src="images/logoWhite.png" alt="San Miguel Services Logo">
<img class="header-logo-dark" src="images/logoDark.png" alt="San Miguel Services Logo">
</a>
</figure>
<nav class="header-menu flex">
<div class="header-menu-li">
WELCOME
SERVICES
ABOUT
PORTFOLIO
CONTACT
</div>
</nav>
<div class="header-btn">
<button href="#" class="button header-btn">REQUEST A QUOTE</button>
</div>
</div>
</header>
CSS:
.header {
position: fixed;
z-index: 1;
width: 100vw;
line-height: 18px;
}
.header .header-logo-dark {
opacity: 0;
display: none;
}
.header .header-logo-light {
opacity: 1;
display: block;
}
.header.is-active .header-logo-dark {
opacity: 1;
display: block;
}
.header.is-active .header-logo-light {
opacity: 0;
display: none;
}
.header.is-active .header-menu-li a {
color: $darkBlue;
&::before {
background: linear-gradient(to right, $mediumGreen, $lightGreen);
}
}
.header.is-active .header-btn button {
background: $mediumGreen;
color: $white;
transition: 300ms ease-in-out;
&:hover {
box-shadow: inset 0 0 0 2px $darkBlue;
color: $darkBlue;
background: transparent;
}
}
.header.is-active {
background: $white;
}
.header-nav {
padding: 20px 5.5%;
position: relative;
justify-content: space-between;
margin: auto;
}
.header-logo {
position: relative;
a img {
height: 46px;
}
}
.header-menu {
align-items: center;
}
.header-menu-li {
a {
position: relative;
margin: 0 0.625rem;
font-weight: 500;
font-size: $font-sm;
color: $white;
transition: color 300ms ease-in-out;
&::before {
content: "";
display: block;
position: absolute;
height: 5px;
background: $white;
left: 0;
right: 0;
bottom: -33px;
opacity: 0;
transition: opacity 300ms ease-in-out;
}
&:hover {
opacity: 0.95;
&::before {
opacity: 1;
}
}
}
}
.header-btn {
height: 46px;
font-size: $font-sm;
font-weight: 500;
button {
background: transparent;
border: 1px solid $white;
transition: 200ms ease-in-out;
&:hover {
background: $white;
color: $darkBlue;
}
}
}
Try this code:
window.addEventListener("scroll", function(){
var header = document.querySelector(".header");
header.classList.toggle("is-active", window.scrollY > 0);
})
Try to use more semantic HTML, this will help you in building the site.
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<section id="home">
<div class="wrapper">
</div>
</section>
You can also add some initial CSS settings to help you build your site, like :root, * {}, etc...
If you still don't know what a :root is, look it up, this will make it a lot easier.
I left some example code.
/* GENERAL */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
:root {
font-size: 62.5%; /* 1rem = 10px */
}
html {
scroll-behavior: smooth;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: " ";
font-size: 1.6rem;
text-align: center;
overflow: overlay;
background-color: var(--name-var);
}
.wrapper {
width: min(50rem, 100%);
margin-inline: auto;
padding-inline: 2.4rem;
}
window.addEventListener('scroll', onScroll)
onScroll()
function onScroll() {
showNavOnScroll ();
showBackToTopButtonOnScroll();
activateMenuAtCurrentSection(home);
}
function activateMenuAtCurrentSection(section) {
const targetLine = scrollY + innerHeight / 2
// check if the section has passed the line
// what data will I need?
const sectionTop = section.offsetTop
const sectionHeight = section.offsetHeight
const sectionTopReachOrPassedTargetLine = targetLine >= sectionTop
// check if the base is below the target line
// what data will I need?
const sectionEndAst = sectionTop + sectionHeight
const sectionEndPassedTargetLine = sectionEndAst <= targetLine
console.log('Did the session bottom go over the line?', sectionEndPassedTargetLine)
// section boundaries
const sectionBoundaries =
sectionTopReachOrPassedTargetLine && !sectionEndPassedTargetLine
const sectionId = section.getAttribute('id')
const menuElement = document.querySelector(`.menu a[href*=${sectionId}]`)
menuElement.classList.remove('active')
if (sectionBoundaries) {
menuElement.classList.add('active')
}
}
// This is so that when you scroll down your navigation bar goes out
function showNavOnScroll() {
if (scrollY > 0) {
navigation.classList.add('scroll');
} else {
navigation.classList.remove('scroll');
}
}
// Will make them appear smooth
ScrollReveal({
origin:'top',
distance: '30px',
duration: 700,
}).reveal(`
#home`);

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>
Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.
Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

How to prevent hidden button blocking links from being clicked

I'm using the below code to add a "back to top" button that appears after scrolling past a certain point on the page. The issue is that this button is blocking my CTA button from being clicked on the top part of the page on mobile because even though it's hidden it's still there. I've discovered that this is due to the fact I'm using "z-index: 10" but if I remove that then the back to top button appears under the rest of the content on the page.
How can I ensure the button doesn't block any other content while hidden or completely remove it from the page until you scroll past a certain point? Is this possible with js? I'd like to avoid jquery if possible.
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 700) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
.bottomMenu {
position: fixed;
bottom: 0;
z-index: 10;
transition: all 1s;
}
.hide {
opacity:0;
left:-100%;
}
.show {
opacity:1;
left:0;
}
.sticky-divi-button {
color: #ffffff;
font-family: "Roboto";
font-size: 18px;
background-color: #f5a623;
border-radius: 30px;
Letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
padding-left: 30px !important;
padding-right: 30px !important;
padding: 20px 3%;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
}
#media (max-width: 767px) and (min-width: 0px) {
.sticky-divi-button {
bottom: 10px !important;
right: 10px !important;
}
}
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="myID" class="bottomMenu hide">GET STARTED</div>
The answer is as simple as adding pointer-events: none; to your css (on the hidden state). It will prevent any interactions with the element, allowing you to "click through" it. :)
I modified css structure.
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 700) {
myID.classList.add("show");
} else {
myID.classList.remove("show");
}
};
window.addEventListener("scroll", myScrollFunc);
.bottomMenu {
position: fixed;
left: -100%;
bottom: 0;
z-index: 10;
transition: all 1s;
}
.bottomMenu .sticky-divi-button{
right: -100%;
}
.bottomMenu.show .sticky-divi-button{
right:2%;
}
.sticky-divi-button {
color: #ffffff;
font-family: "Roboto";
font-size: 18px;
background-color: #f5a623;
border-radius: 30px;
Letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
padding-left: 30px !important;
padding-right: 30px !important;
padding: 20px 3%;
z-index: 10;
transition: all 1s;
position: fixed;
bottom: 40px;
right: 40px;
}
#media (max-width: 767px) and (min-width: 0px) {
.bottomMenu.sticky-divi-button{
bottom: 10px !important;
}
.bottomMenu.show .sticky-divi-button {
right: 10px !important;
}
}
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="myID" class="bottomMenu">GET STARTED</div>

Changing a div opacity on scroll

I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.
Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/

Categories