0
我有一個滑動下劃線網址效果（如下圖所示：http://codepen.io/Dingerzat/pen/XNgKmR），當我用調整頭結合起來後會導致前者無法正常工作。刪除各個章節後，我發現，罪魁禍首是行高在調整頭部CSS中的「標題導航」類，但我需要這個代碼，當我滾動調整頭連接來調整。LINE-HEIGHT造成滑動網址效果打破
有沒有辦法讓這些兩段代碼打球在一起嗎？
我嘗試結合：http://codepen.io/Dingerzat/pen/bBRejp
/* CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline; }
body {
line-height: 1; }
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal; }
ol, ul {
list-style: none; }
blockquote {
quotes: none; }
blockquote:before, blockquote:after {
content: '';
content: none; }
del {
text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0; }
a img {
border: none; }
/* =Scss Variables
-------------------------------------------------------------- */
/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
background-color: #3cb5f9;
color: #505050;
font-family: "Ubuntu", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.8; }
/* Headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
font-weight: 300; }
a {
text-decoration: none;
color: #3cb5f9; }
a:hover {
color: #0793e2; }
/* =Template
-------------------------------------------------------------- */
#wrapper {
width: 100%;
margin: 0 auto; }
#main {
background-color: #ffffff;
padding-top: 150px; }
.container {
width: 80%;
margin: 0 auto;
padding: 0 30px; }
.containertwo {
width: 86%;
margin: 0 auto;
padding: 0 30px; }
.containertwo h3 {
font-size: 30px;
text-align: center;
}
section {
padding: 60px 0; }
section h1 {
font-weight: 700;
margin-bottom: 10px; }
section p {
margin-bottom: 30px; }
section p:last-child {
margin-bottom: 0; }
section.color {
background-color: #d51c84;
color: white; }
/* =Info Bar
-------------------------------------------------------------- */
#info-bar {
background-color: #000000; }
#info-bar a {
color: white;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
margin: 0;
padding: 10px; }
#info-bar a:hover {
background-color: #0793e2; }
#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
display: block;
width: 50%; }
#info-bar span.all-tutorials {
float: left;
text-align: left; }
#info-bar span.back-to-tutorial {
float: right;
text-align: right; }
/* Styles go here */
/* Sliding URL */
.sliding-u-l-r-l {
display: inline-block;
text-decoration:none;
color: #ffffff;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
background: #d41a82;
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0.4s ease;
}
.sliding-u-l-r-l:after {
background: #82da16;
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0.2s ease;
transition-delay: 0.2s;
z-index: -1;
}
.sliding-u-l-r-l:hover:before {
width: 100%;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
/* =Header
-------------------------------------------------------------- */
#logo img {height: 40%;}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #000000;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s; }
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: left;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
header nav {
display: inline-block;
float: right; }
header nav a {
line-height: 150px;
margin-left: 20px;
color: #ffffff;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
header nav a:hover {
color: white; }
header.smaller {
height: 75px; }
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px; }
header.smaller nav a {
line-height: 75px; }
。
<!-- HTML -->
<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>
<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
<!-- js -->
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png">
</h1>
<nav>
<a class=sliding-u-l-r-l href="">Lorem</a>
<a class=sliding-u-l-r-l href="">Ipsum</a>
<a class=sliding-u-l-r-l href="">Dolor</a>
</nav>
</div>
</header><!-- /header -->
<div id="main">
<div id="content">
<main class="content" role="main">
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Cupcakes for the people!</h1>
</div>
</section>
<section class="color">
<div class="container">
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
</section>
</main></div>
</div><!-- #main -->
</div><!-- /#wrapper -->
</body>
</html>
第二選擇效果最好，謝謝！ – Schro