logo标签列表

当页面滚动到顶部时，如何使用jQuery将文本元素添加到导航栏？

javascriptjqueryhtmlnavbarnav
3

我正在制作一个带有固定导航栏的网站。当导航栏到达页面顶部并“固定”时，我想在导航栏左侧添加文本元素“▲”。当导航栏“取消固定”（离开页面顶部）时，我还想删除该元素。下面是我正在使用的JQuery和HTML：

var distance = $('div').offset().top,
  $window = $(window);

$window.scroll(function() {
  if ($window.scrollTop() >= distance) {
    $("#nav").prepend("<li style=\"float: left;\" id=\"navSymbol\"><a href=\"#\">▲</a></li>");
  } else {
    $("#navSymbol").remove();

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="sticky">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>

然而，当我滚动页面时，JQuery会在导航栏里插入大量符号，而不是像这样到达顶部时只插入一个符号：

Screen Shot Of Error

这非常令人沮丧，希望有人能提供帮助。

编辑：

完整代码如下，不确定是否有帮助:（它还没有响应式,所以没有展开看起来不对）

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
@keyframes shadow-pulse {
  0% {
    text-shadow: 0 0 0px black;
  }
  100% {
    text-shadow: 0 0 10vw black;
  }
}

#headerTriangle {
  font-size: 6vw !important;
  animation: shadow-pulse 3s infinite;
}

#header {
  text-align: center;
  padding-top: 8vw;
}

.headerText {
  font-family: 'Rubik', sans-serif;
  font-size: 5vw;
  padding: 2vw 0vw 2vw 0vw;
}

#nav {
  padding-top: 4vw;
  text-align: center;
}

#nav li {
  display: inline;
}

#nav a {
  text-decoration: none;
  padding: 0 30px;
  font-family: 'Rubik', sans-serif;
  color: black;
}

#nav a:hover {
  animation: shadow-pulse 2s 1;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Handmade Studios</title>
  <meta name="description" content="">
  <meta name="author" content="Alex Hawking">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="styles.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Fonts-->

</head>

<body>

  <div id="header">
    <h1 id="headerTriangle">▲</h1>
    <h1 class="headerText" style="font-weight: 500;">Hello World</h1>
    <h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
    </h1>
  </div>

  <ul id="nav" class="sticky">
    <li id="navSymbol"><a href="#">▲</a></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">CAPABILITIES</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">RFQ</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>





  <div style="height: 100vw;"></div>



  <!--Scripts-->

  <script src="js/scripts.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script>
    console.log($('div:last').offset().top)
    var distance = $('div').offset().top,
      $window = $(window);

    $window.scroll(function() {

      if ($window.scrollTop() >= distance) {

        $("#navSymbol").hide();
      } else {
        $("#navSymbol").show();

      }
    });
  </script>
</body>

</html>

1个回答
2

Try this 

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');
@keyframes shadow-pulse {
  0% {
    text-shadow: 0 0 0px black;
  }
  100% {
    text-shadow: 0 0 10vw black;
  }
}

#headerTriangle {
  font-size: 6vw !important;
  animation: shadow-pulse 3s infinite;
}

#header {
  text-align: center;
  padding-top: 8vw;
}

.headerText {
  font-family: 'Rubik', sans-serif;
  font-size: 5vw;
  padding: 2vw 0vw 2vw 0vw;
}

#nav {
  padding-top: 4vw;
  text-align: center;
}

#nav li {
  display: inline;
}

#nav a {
  text-decoration: none;
  padding: 0 30px;
  font-family: 'Rubik', sans-serif;
  color: black;
}

#nav a:hover {
  animation: shadow-pulse 2s 1;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Handmade Studios</title>
  <meta name="description" content="">
  <meta name="author" content="Alex Hawking">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="styles.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Fonts-->

</head>

<body>

  <div id="header">
    <h1 id="headerTriangle">▲</h1>
    <h1 class="headerText" style="font-weight: 500;">Hello World</h1>
    <h1 class="headerText" style="font-weight: 300; font-size: 3vw !important;">This is some random stuff I've made.
    </h1>
  </div>

  <ul id="nav" class="sticky">
    <li id="navSymbol"><a href="#">▲</a></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">CAPABILITIES</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">RFQ</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>





  <div style="height: 100vw;"></div>



  <!--Scripts-->

  <script src="js/scripts.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script>
    console.log($('#navSymbol').offset().top)
    var distance = $('#navSymbol').offset().top,
      $window = $(window);

    $window.scroll(function() {
    console.log($window.scrollTop());
      if ($window.scrollTop() <= 0) {

        $("#navSymbol").show();
      } else {
        $("#navSymbol").hide();

      }
    });
  </script>
</body>

</html>

嗨，Mohammad，感谢您的回复，但是添加这个只会添加符号，没有任何变化。正如我所说，我希望在导航栏位于顶部时添加该符号，并在离开顶部时将其删除。 :) - Alex Hawking
我重新插入了你的JS，现在它可以在符号不在页面顶部时将其删除，但不会重新添加。我还将我的CSS添加到问题中，看看是否有帮助。 - Alex Hawking
@AlexHawking，你能否请执行代码片段？你会发现当它处于顶部时重新添加符号。 - Mohammad Ali Rony
如果您检查代码片段，会发现代码无法运行，抱歉。 - Alex Hawking
@AlexHawking 你能在全页模式下检查一下吗？ - Mohammad Ali Rony
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接