我有一个滑动下划线 url 效果(此处显示:http://codepen.io/Dingerzat/pen/XNgKmR)，当我将它与调整标题结合使用时，后者会导致前者不起作用。删除各个部分后，我发现罪魁祸首是调整标题 CSS 中“标题导航”类中的行高，但我需要在代码中使用它来在滚动时调整调整标题链接的大小。
有没有办法让这两段代码一起玩？
我的综合尝试: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>
最佳答案
问题的原因是当您使用 line-height 时，它会使内部的所有元素都具有垂直间距，因此这些效果在标题之外，并且由于您使用的是 overflow: hidden; 它们无法显示。
你可以通过添加 top: 90px; .sliding-u-l-r-l:after 和 .sliding-u-l-r-l:before 来解决这个问题
或者您可以在 header nav a
中将line-height 替换为 margin-top
关于html - 行高导致滑动 url 效果中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40783385/