在导航栏上应用过渡动画

时间：2021-03-30 11:10:46

标签： javascript html css

我已将导航栏编码为在滚动时保持粘性并更改颜色。但是所有的变化都发生得如此突然，我不知道如何改进。以下是代码示例：

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #F9F871;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid #F9F871;
     transition: all .3s;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
}

.sticky .navbar-lists {
     color: #fff;
}

.sticky .logo {
     color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <section class="about-section">
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>

     </section>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

当导航栏在顶部变粘时，我想添加一些平滑度。如果我能够使用 css 中的 transition 属性来做到这一点，那就太好了。有人可以帮我吗？

3 个答案:

答案 0 :(得分：2)

只需将 public class Zone { public int znId { get; set; } public String znCode { get; set; } public String znFiltre { get; set; } public String znDescription { get; set; } public String znPriority { get; set; } } 属性添加到导航类。它将平滑背景变化。

transition: background duration;
// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #F9F871;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
     transition: background 0.5s;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid #F9F871;
     transition: all .3s;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
}

.sticky .navbar-lists {
     color: #fff;
}

.sticky .logo {
     color: #fff;
}

答案 1 :(得分：0)

我建议您在导航栏中使用 max-height 和所需的 transition，请查看：

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");

       // add the ready class after a tiny delay
       setTimeout(() => {
           navbar.classList.add("ready");
       }, 100);
  } else {
       navbar.classList.remove("sticky");
       
       // don't forget to also remove ready class
       navbar.classList.remove("ready");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #F9F871;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid #F9F871;
     transition: all .3s;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
     max-height: 0px; /* set max-height as 0 */
     transition: height 1500ms linear; /* define your max-height transition */
}
.sticky.ready {
     max-height: 9999px; /* when "ready" the sticky navbar transitions to have a height */
}

.sticky .navbar-lists {
     color: #fff;
}

.sticky .logo {
     color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <section class="about-section">
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>

     </section>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

您可以微调 setTimeout 延迟和 transition durantion 以获得更好/更平滑的效果。

答案 2 :(得分：0)

我使用 flexbox 更改了一些代码，以及标题和导航上的过渡以改善过渡效果。

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #F9F871;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom: .5px solid #777;
  box-sizing: border-box;
  height: 80px;
  transition: all .5s;
  padding: 1rem;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
}

.navbar {
     float: right;
     list-style: none;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid #F9F871;
     transition: all .3s;
}

/* The sticky navbar */

.sticky {
  position: fixed;
  background-color: #353353;
  top: 0;
  width: 100%;
  height: 50px;
  padding: 0rem 1rem;
}

.sticky .navbar-lists {
     color: #fff;
}

.sticky .logo {
     color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <section class="about-section">
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>
          <h2>Who am I</h2>

     </section>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

相关问题
最新问题