$(window.parent).scroll(function(){
if ($(window.parent).scrollTop() >= 410) {
$('nav').addClass('sticky');
}
else {
$('nav').removeClass('sticky');
}
});/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
font-size: 1vw;
width: 100%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
/*HKEY_CURRENT_USER\Software\Microsoft\ Windows\CurrentVersion\Policies\Explorer
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
/* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
ul,
menu,
dir {
display: block;
list-style-type: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
p {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
/* W3.css 4.10 February 2018 by Jan Egil and Borge Refsnes */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
progress {
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
figure {
margin: 1em 40px;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: bold;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type=checkbox],
[type=radio] {
padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/* End extract */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/s/librebaskerville/v5/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxY.ttf) format('truetype');
}
/*===================================================*/
/* css Document */
/* colors */
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
min-height: 100%;
overflow-x: hidden;
}
body {
background-color: #f6f3f3;
}
h1 {
font-size: 4.24rem;
line-height: 5rem;
letter-spacing: 0.01em;
margin: 0;
}
h1 .wrap {
line-height: 5rem;
height: 5rem;
min-width: 3rem;
border-right: solid 1px #f6f3f3;
}
h1.tipyng {
float: left;
margin-right: 1.1rem;
}
h2 {
font-size: 4.25rem;
letter-spacing: 0.01em;
}
h3 {
font-size: 2.12rem;
line-height: 2.5rem;
letter-spacing: 0.01em;
margin: 0;
}
h4 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.63rem;
font-weight: bold;
line-height: 1.63rem;
letter-spacing: 0.01em;
margin: 0;
}
h1,
h2,
h3 {
font-family: Baskerville, 'Libre Baskerville', serif;
font-weight: 400;
}
p,
a,
li {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.63rem;
line-height: 1.63rem;
letter-spacing: 0.01em;
font-weight: lighter;
color: #545353;
}
nav div {
color: white;
font-size: 2rem;
line-height: 60px;
position: absolute;
top: 0;
left: 2%;
opacity: 0;
transition: 0.32s;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
}
.visible-title {
opacity: 0.9;
transition: 0.8s;
}
header {
margin: 0;
padding: 27.57vw 0 0 0;
width: 100%;
background-color: #f6f3f3;
}
.nav-header {
width: 100%;
height: 4.43vw;
background: url("../img/header-bg.jpg") bottom center no-repeat;
background-size: contain;
background-color: red;
}
.nav-header ul {
width: 100%;
height: 4.43vw;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-header ul li {
padding: 0.131vw 0 0 0;
margin: 0 0 0 0;
float: left;
display: block;
border: none;
}
.nav-header ul li a {
height: 4.43vw;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.17rem;
line-height: 3.96vw;
letter-spacing: 0.2em;
color: #ffffff;
padding: 0.47vw 0 0 1.51vw;
margin: 0;
display: block;
text-decoration: none;
text-align: left;
vertical-align: center;
width: 100%;
}
.nav-header ul .item-1 {
width: 11.11%;
}
.nav-header ul .item-1 a {
}
.nav-header ul .item-2 {
width: 15.93%;
}
.nav-header ul .item-2 a {
background: rgba(255, 255, 255, 0.07);
}
.nav-header ul .item-3 {
width: 19.78%;
}
.nav-header ul .item-3 a {
background: rgba(255, 255, 255, 0.25);
}
.nav-header ul .item-4 {
width: 23.37%;
}
.nav-header ul .item-4 a {
background: rgba(255, 255, 255, 0.33);
}
.nav-header ul .item-5 {
width: 15.1%;
}
.nav-header ul .item-5 a {
background: rgba(255, 255, 255, 0.22);
}
.nav-header ul .item-6 {
width: 14.68%;
}
.nav-header ul .item-6 a {
}
.nav-header ul .item-2 a:hover,
.nav-header ul .item-3 a:hover,
.nav-header ul .item-4 a:hover,
.nav-header ul .item-5 a:hover {
background: rgba(255, 255, 255, 0.4);
transition: 0.3s;
}
.section-di {
width: 100%;
margin: 0 0 20vw;
padding: 3.85vw 0 7vw 6.27vw;
color: #545353;
position: relative;
}
.section-di ul {
list-style: none;
margin: 3.7vw 0 0;
}
.section-di ul li {
display: inline-block;
margin: 0 0.25vw 0 0;
}
.section-di ul li a {
text-decoration: none;
font-weight: bold;
}
.section-parallax-1 {
width: 100%;
height: 12vw;
top: 16vw;
}
.section-parallax-1 img {
width: 15.39vw;
height: 11.97vw;
position: absolute;
right: 21.52vw;
bottom: 7vw;
background-color: yellow;
}
.section-pos {
width: 100%;
margin: 0;
padding: 3.85vw 5.13vw 0 5.7vw;
color: #545353;
position: relative;
}
.section-pos .left-section {
width: 33.97vw;
float: left;
margin: -5vw 0 0 0;
padding: 5vw 0 2vw;
}
.section-pos .left-section h2 {
margin-bottom: 2.3vw;
}
.section-pos .left-section h4 {
margin: 1.4vw 0 0.6vw;
}
.section-pos .left-section p {
line-height: 2.09rem;
}
.section-pos .right-section {
width: 51vw;
float: right;
}
.section-pos .right-section img.pos-image {
max-width: 100%;
height: auto;
box-shadow: 0.3rem 0.45rem 3rem rgba(0, 0, 0, 0.1);
margin-top: 2.3vw;
background-color: cyan;
}
.section-parallax-2 {
width: 100%;
height: 30vw;
top: 10vw;
position: relative;
background: url("../img/sign-04.svg") left 12.2vw top 8.26vw no-repeat, url("../img/sign-02.svg") right 8.3vw bottom no-repeat;
background-size: 20vw, 5.55vw;
background-color: green;
}
.section-iv {
width: 100%;
margin: 0 0 0;
padding: 0 5.13vw 0 6.7vw;
color: #545353;
position: relative;
}
.section-iv .title-wrapper h2 {
width: 28vw;
text-align: center;
margin: 0 auto 10vw;
padding: 3vw 0;
}
.section-iv .left-section {
width: 41.98vw;
float: left;
margin: 0;
padding: 0;
background-color: #f6f3f3;
}
.section-iv .left-section img {
max-width: 100%;
height: auto;
background-color: blue;
}
.section-iv .right-section {
width: 38.5vw;
padding: 2vw 0 5vw;
margin-top: -2vw;
float: right;
}
.section-iv .right-section p {
line-height: 2.09rem;
}
.section-iv .right-section ul {
list-style: none;
padding: 2.5vw 0 0;
}
.section-iv .right-section ul li {
display: inline-block;
margin: 0 0.5vw 0 0;
}
.section-iv .right-section ul li a {
text-decoration: none;
font-weight: bold;
}
footer {
height: 27.99vw;
margin-top: 20.52vw;
background-color: #252525;
padding-top: 14vw;
}
.parallax {
perspective: 1px; /*open for parallax and close fore stycky */
max-height: 100vh; /*open for parallax and close fore stycky */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: relative;
}
.parallax__layer--back {
transform: translateZ(-0.5px) scale(1.5);
}
.parallax__layer--base {
transform: translateZ(0);
}
.sticky {
display: block;
position: fixed;
top: -0.2vw;
width: 100%;
z-index: 999;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script defer type="text/javascript" src="js/scripts.js"></script>
</head>
<body class="">
<div class="parallax">
<header></header>
<nav class="nav-header" id="header">
<ul>
<li class="item-1"><a class="home" href="#"></a></li>
<li class="item-2"><a href="#">Item 1</a></li>
<li class="item-3"><a href="#">Item 2</a></li>
<li class="item-4"><a href="#">Item 3</a></li>
<li class="item-5"><a href="#">Item 4</a></li>
<li class="item-6"><a class="Item 6" href="#"></a></li>
</ul>
</nav>
<section class="section-di">
<h3>Title here</h3>
<ul>
<li><a href="#">Point of Sale</a></li>
<li>|</li>
<li><a href="#">Apps</a></li>
<li>|</li>
<li><a href="#">Internal Communications and Training.</a></li>
</ul>
</section>
<section class="section-parallax-1 parallax__layer parallax__layer--back">
<img src="img/sign-03.svg" alt="v"/>
</section>
<section class="section-pos parallax__layer parallax__layer--base">
<div class="left-section">
<h2>Title here</h2>
<p>that drive consumer engagment with<br/>
interactive technology that sparkles,<br/>
calls customer attention and<br/>
stimulates purchase.</p>
</div>
<div class="right-section">
<img class="pos-image" src="img/point-of-sale.jpg" alt="Point of sale"/>
</div>
<div class="clearfix"></div>
</section>
<section class="section-parallax-2 parallax__layer parallax__layer--back">
</section>
<section class="section-iv parallax__layer parallax__layer--base">
<div class="title-wrapper">
<h2>Title here</h2>
</div>
<div class="section-bg-wrapper">
<div class="left-section">
<img class="" src="img/inspired-video.jpg" alt="Inspired video"/>
</div>
<div class="right-section">
<p>
It’s a video driven world, and quality video<br/> concepts online or at point of sale ensure
not<br/>
only
that your messaging attracts but that it also<br/> resonates.
</p>
</div>
<div class="clearfix"></div>
</div>
</section>
<footer></footer>
</div>
</body>
</html>I have a problem with the simultaneous use of parallax (css) and sticky header (javascript). Individually they work well, but do not work together.
I mean, what the problem is using window.onScroll in a window with a height of 100%.
It seems to me that he can not hear the event (window.onScroll) because he simply can not come.
Anyway, I'll be glad if you help me get parallax and sticky navbar. There may be an alternative to the window.onScroll that can hear not scrolling the window, but moving/scrolling the div or nav and etc.
A similar topic was discussed here: CSS parallax header and sticky navigation mutually exclusive? but there is no solution to the problem.
Thank you.
CSS for parallax container:
.parallax {
//perspective: 1px; enable for parallax
//max-height: 100vh; enable for parallax
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}`
HTML structure:
<body>
<div class="parallax">
<header> ... </header>
<nav class="nav-header" id="header">
<ul>
<li></li>
...
</ul>
</nav>
<section class=""> ... </section>
<section class=""> ... </section>
<section class=""> ... </section>
</div>
</body>
JavaScript:
$(window).scroll(function(){
if ($(window).scrollTop() >= 410) {
$('nav').addClass('sticky');
}
else {
$('nav').removeClass('sticky');
}
});
