Skip to content

Commit

Permalink
Makes menu both static and fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodrickcalvin
rodrickcalvin committed Jun 4, 2020
1 parent 0aa6c08 commit 84c45fc
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 79 deletions.
23 changes: 12 additions & 11 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ p {
font-size: 22px;
}
a,
a:hover,
a:active,
a:visited {
a:active {
text-decoration: none;
color: #5000F1;
}
Expand Down Expand Up @@ -326,7 +324,10 @@ h3.heading {
padding: 20px;
width: 350px;
margin-left: 70px;
height: 95vh;
height: auto;
}
.options a {
display: block;
}
.options-text {
font-size: medium;
Expand All @@ -336,15 +337,12 @@ h3.heading {
color: #222;
}
.fixed {
margin-top: 200px;
top: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
margin-top: 50px;
z-index: 4;
}
.content {
z-index: 5;
.stick {
position: fixed;
top: 20px;
}
/* Style the active class (and buttons on mouse-over) */
.active {
Expand All @@ -353,6 +351,9 @@ h3.heading {
.option:hover {
color: #00F1C9;
}
html {
scroll-behavior: smooth;
}



Expand Down
122 changes: 54 additions & 68 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,30 +167,29 @@ <h3>Parallax Library</h3>

</section>

<div class="row">
<section class="row">
<div class="col-md-3">
<div class="fixed">
<div class="m-3">
<div class="options" id="optnCard">
<div>
<p class="options-text disabled">OPTIONS</p>
<p><a href="#GettingStarted" class="option options-title active">Getting Started!</a></p>
<p><a class="option options-title" href="#Speed">Speed</a></p>
<p><a class="option options-title" href="#Centering">Centering</a></p>
<p><a class="option options-title" href="#ZIndex">Z-Index</a></p>
<p><a class="option options-title" href="#HorParlx">Horizontal Scrolling</a><span>➔</span></p>
<p><a class="option options-title" href="#CustomWrapper">Custom Wrapper</a></p>
<p><a class="option options-title" href="#Target Node">Target Node</a></p>
<p class="options-text">METHODS</p>
<p><a class="option options-title" href="#Refresh">Refresh</a></p>
<p><a class="option options-title" href="#Destroy">Destroy</a></p>
</div>
</div>
<div class="fixed" id="sidenav">
<div class="options" id="optnCard">

<p class="options-text disabled">OPTIONS</p>
<a href="#GettingStarted" class="option options-title active">Getting Started!</a>
<a class="option options-title" href="#Speed">Speed</a>
<a class="option options-title" href="#Centering">Centering</a>
<a class="option options-title" href="#ZIndex">Z-Index</a>
<a class="option options-title" href="#HorParlx">Horizontal Scrolling</a>
<!-- <span>➔</span> -->
<a class="option options-title" href="#CustomWrapper">Custom Wrapper</a>
<a class="option options-title" href="#TargetNode">Target Node</a>
<p class="options-text">METHODS</p>
<a class="option options-title" href="#Refresh">Refresh</a>
<a class="option options-title" href="#Destroy">Destroy</a>

</div>
</div>
</div>

<div class="col-md-9 content">
<div class="col-md-9">
<!-- Getting Started -->
<section class="section" id="GettingStarted">
<div style="margin-top: 150px">
Expand All @@ -203,7 +202,7 @@ <h3>Parallax Library</h3>
<h2 class="heading">Getting Started!</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="text-editor">
Expand All @@ -212,7 +211,7 @@ <h2 class="heading">Getting Started!</h2>
</code>
</div>
<p style="text-align:center; font-weight: lighter;">
or if you're old school like us, download and insert
or if you're old school like us, download and insert
<kbd>rellax.min.js</kbd> file in your project folder.
</p>
</div>
Expand Down Expand Up @@ -247,7 +246,7 @@ <h3 class="heading">JavaScript (`accepts any class name`)</h3>
<h3 class="heading">Basic Markup (Default Speed: -2)</h3>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="text-editor">
Expand All @@ -262,7 +261,7 @@ <h3 class="heading">Basic Markup (Default Speed: -2)</h3>

</div>


<div>
<!-- sect4 -->
<div class="row">
Expand Down Expand Up @@ -299,7 +298,7 @@ <h3 class="heading">Optional Speed (-10 to +10)</h3>
</div>
</div>
</section>

<!-- Speed -->
<section class="section" id="Speed">
<div style="margin-top: 150px">
Expand All @@ -312,14 +311,14 @@ <h3 class="heading">Optional Speed (-10 to +10)</h3>
<h2 class="heading">Speed</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
Use the <kbd>data-rellax-speed</kbd> attribute to set the speed of a
<kbd>.rellax</kbd> element to something other than the default value
(which is <kbd>-2</kbd>). A negative value will make it move slower
than regular scrolling, and a positive value will make it move faster.
Use the <kbd>data-rellax-speed</kbd> attribute to set the speed of a
<kbd>.rellax</kbd> element to something other than the default value
(which is <kbd>-2</kbd>). A negative value will make it move slower
than regular scrolling, and a positive value will make it move faster.
We recommend keeping the speed between <kbd>-10 and +10</kbd>.
</p>
</div>
Expand All @@ -338,8 +337,8 @@ <h3 class="heading">Responsive Speed</h3>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
Use responsive speed attributes for breakpoint levels that require a
different speed. Defaults to the <kbd>data-rellax-speed</kbd> setting
Use responsive speed attributes for breakpoint levels that require a
different speed. Defaults to the <kbd>data-rellax-speed</kbd> setting
in unspecified breakpoints.
</p>
</div>
Expand Down Expand Up @@ -367,8 +366,8 @@ <h3 class="heading">Responsive Speed</h3>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
Pass an array of breakpoints. Each breakpoint value represents the
resolution for mobile, tablet, desktop respectively. Checkout the
Pass an array of breakpoints. Each breakpoint value represents the
resolution for mobile, tablet, desktop respectively. Checkout the
responsiveness of the demo.
</p>
</div>
Expand Down Expand Up @@ -411,14 +410,15 @@ <h3 class="heading">Responsive Speed</h3>
<h2 class="heading">Centering</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
After some fantastic work from <kbd><a style="color: orange;" href="https://github.com/p-realinho">@p-realinho</a></kbd>, we
just released the ability to center parallax elements in your viewport!
We'll be building a nice demo website, but for now check out the tests
folder for several examples of how it works via our tests folder on
After some fantastic work from <kbd><a style="color: orange;"
href="https://github.com/p-realinho">@p-realinho</a></kbd>, we
just released the ability to center parallax elements in your viewport!
We'll be building a nice demo website, but for now check out the tests
folder for several examples of how it works via our tests folder on
<a href="https://github.com/dixonandmoe/rellax">GitHub</a>.
</p>
<br>
Expand Down Expand Up @@ -494,11 +494,11 @@ <h2 class="heading">Centering</h2>
<h2 class="heading">Z-Index</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
If you want to sort your elements properly in the Z space,
If you want to sort your elements properly in the Z space,
you can use the <br><kbd>data-rellax-zindex</kbd> property.
</p>
<br>
Expand Down Expand Up @@ -542,15 +542,15 @@ <h2 class="heading">Z-Index</h2>
<h2 class="heading">Horizantal Parallax</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
Horizontal parallax is disabled by default. You can enable it by passing
<br><kbd><span class="orange">horizontal: true</span></kbd> in the settings
block. This feature is intended for panoramic style websites, where users
scroll horizontally instead of vertically. Note that this can work together
at the same time with the default vertical parallax. If you do not want this,
Horizontal parallax is disabled by default. You can enable it by passing
<br><kbd><span class="orange">horizontal: true</span></kbd> in the settings
block. This feature is intended for panoramic style websites, where users
scroll horizontally instead of vertically. Note that this can work together
at the same time with the default vertical parallax. If you do not want this,
pass <kbd><span class="orange">vertical: false</span></kbd>.
</p>
<br>
Expand Down Expand Up @@ -595,12 +595,12 @@ <h2 class="heading">Horizantal Parallax</h2>
<h2 class="heading">Custom Wrapper</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
By default, the position of parallax elements is determined via the scroll
position of the body. Passing in the <br><kbd><span class="orange">wrapper</span></kbd>
By default, the position of parallax elements is determined via the scroll
position of the body. Passing in the <br><kbd><span class="orange">wrapper</span></kbd>
property in the settings block will tell Rellax to watch that element instead.
</p>
<br>
Expand Down Expand Up @@ -643,12 +643,12 @@ <h2 class="heading">Custom Wrapper</h2>
<h2 class="heading">Target Node</h2>
</div>
</div>

<div class="row">
<div class="col-md-offset-2 col-md-8">
<p style="font-weight: lighter;">
Instead of using a className you can use a node, handy when using
React and you want to use <kbd><span class="orange">refs</span></kbd>
Instead of using a className you can use a node, handy when using
React and you want to use <kbd><span class="orange">refs</span></kbd>
instead of <kbd><span class="orange">className</span></kbd>
</p>
<br>
Expand Down Expand Up @@ -760,7 +760,7 @@ <h2 class="heading">Destroy</h2>
</div>
</section>
</div>
</div>
</section>

<section class="section">

Expand Down Expand Up @@ -841,6 +841,7 @@ <h4>BUT ACTUALLY</h4>

<!-- javascript -->
<script type="text/javascript" src="rellax.js"></script>
<script type="text/javascript" src="option.js"></script>
<script>
var rellax = new Rellax('.rellax', {
// center: true
Expand All @@ -850,21 +851,6 @@ <h4>BUT ACTUALLY</h4>
},
breakpoints: [576, 768, 1024]
});
// Get the container element
var optnCard = document.getElementById("optnCard");

// Get all buttons with class="btn" inside the container
var optns = optnCard.getElementsByClassName("option");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < optns.length; i++) {
optns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

</script>


Expand Down

0 comments on commit 84c45fc

Please sign in to comment.