Question

我正在尝试创建一种效果，在您向下滚动后，导航栏项目会进入其中。这可以通过增加底部填充或减少顶部填充来有效地完成。但是，当我尝试将其添加到我的代码中时，过渡不会显示，并且什么也不会发生。我正在尝试创建的示例可以在this website上看到。

到目前为止，我的代码可以在this fiddle中看到。

$(document).ready(function() {
	$(window).scroll(function() {
  	if($(document).scrollTop() > 10) {
    	$('#nav').addClass('shrink');
        $('#menu1').removeClass('shrink');
    }
    else {
    $('#nav').removeClass('shrink');
    $('#menu1').removeClass('shrink');
    }
  });
});

/**********BODY GENERAL**********/
body {
    margin: 0;
    height: 2500px;
    /* just to demonstrate how it will looks with content */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Fix this one day */
.bg-img {
   height: 100vh;
  width: 100%;
  background: url('https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
  background-size: cover;
  background-position: center;
  position: relative;
}

strong {
    font-weight: bold;
}

/*********NAVIGATION*********/
@media screen and (max-width: 900px) {
    nav {
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-gap: 1em;
    }
}

#menu1 {
    grid-column: 1;
    padding-top: 0px;
    padding-bottom: 0px;
}

#menu2 {
    grid-column: 2;
    padding-top: 0px;
    padding-bottom: 0px;
}

#logo {
    grid-column: 3;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 28px;
    width: 500px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 7vh;
    margin-bottom: 25px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#menu3 {
   grid-column: 4;
    padding-top: 0px;
    padding-bottom: 0px;
}

#menu4 {
    grid-column: 5;
    padding-top: 0px;
    padding-bottom: 0px;
}


/**************HOVER ANIMATION**************/
div>a {
    font-family: 'Raleway';
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    position: relative;
    font-size: 0.8rem;
}

div>a:hover {
    color: #000;
}

div>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/**********MAIN HEADER***********/
header {
    color: white;
    justify-content: center;
    align-content: center;
    top: 0;
    bottom: 0;
    left: 0;
}

/**********BODY*****************/
.Minfo {
    color: red;
    width: 100%;
    padding-top: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
}

.subtitle {
    padding-left: 4em;
    padding-top: 29em;
    font-size: 100%;
    color: #fff;
}

.title {
    font-size: 3em;
    text-align: left;
    color: #FFF;
    padding-bottom: 0px;
}

.subtext {
    padding-top: 0px;
    color: #FFF;
}

/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1em;
    grid-auto-rows: auto;
    text-align: center;
    align-items: center;
    background: transparent;
    z-index: 100;
    transition: all ease .5s;
    height: 70px;
    position: relative;
    z-index: 99;
}

/*============= NEW CSS RULES ============*/

/* #nav {
  position: relative;
    z-index: 99;
}
*/

#nav, #words{
  height: 0px;
  background: transparent; 
  display: block;
  position: fixed;
  width: 100%;
  z-index: 99999;
  transition: all ease .5s;

}

#words: {
    font-size: 18px;
    transition: all ease .5s;

}

#nav.shrink {
  height: 80px;
    transition: all ease .5s;
  background: white;
}

#menu1.shrink{
    padding-top: 0px;
    transition: all ease .5s;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Centennial It's Academic</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="main.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <!-- Linking Jquery/Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="bg-img">
        <header>
            <div id="nav">
            <!---- NEW BACKGROUND ELEMENT HERE ---->
                <div class="background"></div>
                <nav class="container">
                    <div id="menu1">
                        <a id="navLinks words" href="#home">Home</a>
                    </div>
                    <div id="menu2">
                        <a id="navLinks words" href="#upcoming">Tournaments</a>
                    </div>
                    <div id="logo">
                        <p>It's Academic</p>
                    </div>
                    <div id="menu3">
                        <a id="navLinks words" href="#history">History</a>
                    </div>
                    <div id="menu4">
                        <a id="navLinks words" href="#faq">Contact Info</a>
                    </div>
                </nav>
                <!-- This cluster of info -->
            </div>
        </header>

        <div class="Minfo">
            <div class="subtitle">
                CENTENNIAL<br>
                <div class="title">
                    It's Academic
                </div>
                <br>
                <div class="subtext">
                    Meets every Tuesday in Room 506
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

在我的方法中，插入操作应与导航栏过渡同时发生，正如您在javascript中将它们分组在一起时所看到的那样。我可以稍后更改。

Answer 1

非常漂亮的网站！这就是您要寻找的...

只需将其添加到您的CSS中就可以了：

.shrink .container{
  margin-top: -20px;
}

当然，您应该将-20px调整为适合您的值！

为导航栏项目创建“插入”效果

1 个答案: