Html 导致滑动url效果中断的行高度

我有一个滑动下划线url效果（如下所示：），当我将其与一个调整大小的标题结合使用时，后者会导致前者不起作用。删除各个部分后，我发现罪魁祸首是调整大小的标题CSS中“header nav”类中的行高，但我需要在代码中包含这一点，以便在滚动时调整调整调整大小的标题链接

有没有办法让这两段代码一起发挥作用

我的联合尝试：

标题在带有动画的滚动上调整大小
函数init（）{
window.addEventListener（'scroll'，函数（e）{
var distance=window.pageYOffset | | document.documentElement.scrollTop，
shrinkOn=300，
页眉=document.querySelector（“页眉”）；
如果（距离>收缩）{
类别添加（标题，“较小”）；
}否则{
如果（类别有（标题，“较小”））{
类别移除（标题“较小”）；
}
}
});
}
window.onload=init（）；

为人民准备的纸杯蛋糕！
纸杯蛋糕ipsum dolor sit amet棒棒糖。杏仁饼糖果棉花糖熊爪杏仁饼胡萝卜蛋糕糕点糖衣甜点。纸杯蛋糕糕点馅饼芝麻脆棒棒糖甜甜圈馅饼。曲奇苹果派太妃糖柠檬滴果冻豆芝士蛋糕甜面包卷。果冻蛋奶酥甜甜圈糖果棒威化威化甜奶酪蛋糕。杏仁饼焦糖派曲奇香肠熊。冰淇淋果冻太妃糖饼干姜饼饼干。蛋奶酥水果蛋糕果冻-o果冻chupa可品尝果冻豆。杏仁糕点杏仁饼燕麦蛋糕松饼蛋奶酥加甘草。果冻巧克力蛋糕棒棒糖

糖李子松饼饼干糕点燕麦蛋糕糖霜糖果棒巧克力。Gummi bears chupa chupa水果蛋糕甜点果冻。松饼饼干冰淇淋蛋奶酥糕点棒棒糖姜饼甜。Unerdwear.com邦邦糖果marzipan邦邦口香糖巧克力蛋糕gummi熊口香糖粉。Unerdwear.com果馅饼halvah巧克力蛋糕dragée甘草。糖李子巧克力条糕点甘草果冻粉。果冻卷涂焦糖。Marzipan candy tootsie面包圈。Gummies冰淇淋杏仁饼

糖拉什，哦，我的。。。
纸杯蛋糕ipsum dolor sit amet棒棒糖。杏仁饼糖果棉花糖熊爪杏仁饼胡萝卜蛋糕糕点糖衣甜点。纸杯蛋糕糕点馅饼芝麻脆棒棒糖甜甜圈馅饼。曲奇苹果派太妃糖柠檬滴果冻豆芝士蛋糕甜面包卷。果冻蛋奶酥甜甜圈糖果棒威化威化甜奶酪蛋糕。杏仁饼焦糖派曲奇香肠熊。冰淇淋果冻太妃糖饼干姜饼饼干。蛋奶酥水果蛋糕果冻-o果冻chupa可品尝果冻豆。杏仁糕点杏仁饼燕麦蛋糕松饼蛋奶酥加甘草。果冻巧克力蛋糕棒棒糖

糖李子松饼饼干糕点燕麦蛋糕糖霜糖果棒巧克力。Gummi bears chupa chupa水果蛋糕甜点果冻。松饼饼干冰淇淋蛋奶酥糕点棒棒糖姜饼甜。Unerdwear.com邦邦糖果marzipan邦邦口香糖巧克力蛋糕gummi熊口香糖粉。Unerdwear.com果馅饼halvah巧克力蛋糕dragée甘草。糖李子巧克力条糕点甘草果冻粉。果冻卷涂焦糖。Marzipan candy tootsie面包圈。Gummies冰淇淋杏仁饼

问题的原因是，当您使用“行高”时，它使内部的所有元素都具有垂直间距，因此这些效果在标题之外，并且由于您使用的是“溢出：隐藏”无法显示它们

您可以通过添加

top:90px。滑动-u-l-r-l:在之后和之前。滑动-u-l-r-l:在

或者您可以在标题导航a中用
边距顶部
替换
行高
问题的原因是，当您使用行高时，它会使内部所有元素具有垂直间距，因此这些效果在标题之外，并且因为您使用的是
溢出：隐藏无法显示它们

您可以通过添加
top:90px。滑动-u-l-r-l:在之后和之前。滑动-u-l-r-l:在

或者您可以在标题导航a中用
页边距顶部
替换
行高

/* 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>