From 84c45fcf681007e321cf98fd59c9dd1eccdf722e Mon Sep 17 00:00:00 2001 From: rodrickcalvin Date: Thu, 4 Jun 2020 03:54:20 +0300 Subject: [PATCH] Makes menu both static and fixed --- css/main.css | 23 +++++----- demo.html | 122 +++++++++++++++++++++++---------------------------- 2 files changed, 66 insertions(+), 79 deletions(-) diff --git a/css/main.css b/css/main.css index 771522f..e858779 100644 --- a/css/main.css +++ b/css/main.css @@ -14,9 +14,7 @@ p { font-size: 22px; } a, -a:hover, -a:active, -a:visited { +a:active { text-decoration: none; color: #5000F1; } @@ -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; @@ -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 { @@ -353,6 +351,9 @@ h3.heading { .option:hover { color: #00F1C9; } +html { + scroll-behavior: smooth; +} diff --git a/demo.html b/demo.html index a473072..e328c36 100644 --- a/demo.html +++ b/demo.html @@ -167,30 +167,29 @@

Parallax Library

-
+
-
-
- +
-
+
@@ -203,7 +202,7 @@

Parallax Library

Getting Started!

- +
@@ -212,7 +211,7 @@

Getting Started!

- or if you're old school like us, download and insert + or if you're old school like us, download and insert rellax.min.js file in your project folder.

@@ -247,7 +246,7 @@

JavaScript (`accepts any class name`)

Basic Markup (Default Speed: -2)

- +
@@ -262,7 +261,7 @@

Basic Markup (Default Speed: -2)

- +
@@ -299,7 +298,7 @@

Optional Speed (-10 to +10)

- +
@@ -312,14 +311,14 @@

Optional Speed (-10 to +10)

Speed

- +

- Use the data-rellax-speed attribute to set the speed of a - .rellax element to something other than the default value - (which is -2). A negative value will make it move slower - than regular scrolling, and a positive value will make it move faster. + Use the data-rellax-speed attribute to set the speed of a + .rellax element to something other than the default value + (which is -2). 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 -10 and +10.

@@ -338,8 +337,8 @@

Responsive Speed

- Use responsive speed attributes for breakpoint levels that require a - different speed. Defaults to the data-rellax-speed setting + Use responsive speed attributes for breakpoint levels that require a + different speed. Defaults to the data-rellax-speed setting in unspecified breakpoints.

@@ -367,8 +366,8 @@

Responsive Speed

- 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.

@@ -411,14 +410,15 @@

Responsive Speed

Centering

- +

- After some fantastic work from @p-realinho, 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 @p-realinho, 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 GitHub.


@@ -494,11 +494,11 @@

Centering

Z-Index

- +

- 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
data-rellax-zindex property.


@@ -542,15 +542,15 @@

Z-Index

Horizantal Parallax

- +

- Horizontal parallax is disabled by default. You can enable it by passing -
horizontal: true 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 +
horizontal: true 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 vertical: false.


@@ -595,12 +595,12 @@

Horizantal Parallax

Custom Wrapper

- +

- By default, the position of parallax elements is determined via the scroll - position of the body. Passing in the
wrapper + By default, the position of parallax elements is determined via the scroll + position of the body. Passing in the
wrapper property in the settings block will tell Rellax to watch that element instead.


@@ -643,12 +643,12 @@

Custom Wrapper

Target Node

- +

- Instead of using a className you can use a node, handy when using - React and you want to use refs + Instead of using a className you can use a node, handy when using + React and you want to use refs instead of className


@@ -760,7 +760,7 @@

Destroy

-
+
@@ -841,6 +841,7 @@

BUT ACTUALLY

+