JQuery 父位置更改时删除元素

Question

我正在制作一个带有粘性导航栏的网站，当导航栏到达页面顶部（用户向下滚动）时会出现一个符号，当导航栏离开页面顶部（用户滚动）时会消失向上）。到目前为止，我可以使符号出现但不会重新出现。

下面是js代码和导航的HTML：

$(document).ready(function() {

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


  $(window).scroll(function() {
    if ($window.scrollTop() < distance) {
      $("#nav").remove(
        "<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");

    }

    if ($window.scrollTop() >= distance) {
      if ($("#navSymbol").length) {
        console.log("not adding")

      } else {
        $("#nav").prepend(
          "<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");
      }
    }


  });

});

<head>
  <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">
</head>

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

<div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;">
  <ul class="nav justify-content-center sticky-top" id="navcontent">
    <li class="nav-item">
      <a class="nav-link active" id="nav" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Staffing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Marketing and Finance</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Future Prospects</a>
    </li>
  </ul>
</div>

<div style="height: 100vw;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

希望有人能帮忙！

Answer 1

当您调用 remove 方法时，您现在并没有删除您的节点。

没有参数的 remove 方法正在删除当前节点。
带有参数的 remove 方法正在从提供的选择器中删除元素。

通过提供 HTML，您将为未附加到 DOM 文档的节点生成一个选择器。由于他不在那里，删除它没有任何影响。

您可以尝试这样的操作：

$(document).ready(function() {
    var distance = $('#navbar').offset().top,
        $window = $(window);

    $(window).scroll(function() {
    if ($window.scrollTop() < distance) {
        $("#navSymbol").remove();
    }

    if ($window.scrollTop() >= distance) {
        if ($("#navSymbol").length) {
            console.log("not adding")
        } else {
            $("#nav").prepend("<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");
        }
    }
});

Answer 2

您也可以使用 jQuery 隐藏功能隐藏您的元素。并用 show 函数再次显示。

$(document).ready(function() {
  var previous_distance = 0;

  $(window).scroll(function() {
    var distance = $('#navbar').offset().top;
    if (previous_distance < distance) {
      $("#navSymbol").hide();
    }
    else {
      $("#navSymbol").show();
    }
    previous_distance = distance
  });

});

<head>
  <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">
</head>

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

<div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;">
  <ul class="nav justify-content-center sticky-top" id="navcontent">
    <li id="navSymbol"><a href=\"#\">▲</a></li>
    <li class="nav-item">
      <a class="nav-link active" id="nav" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Staffing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Marketing and Finance</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Future Prospects</a>
    </li>
  </ul>
</div>

<div style="height: 100vw;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

Answer 3

您的代码中有一个错误 'remove' 方法删除了 jQuery 集合中包含的节点，该集合在调用 'remove()' 时发起了调用。

你可以使用

 $("#nav").text("About");

而不是

$("#nav").remove(
    "<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");

Answer 4

$(document).ready(function() {

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


$(window).scroll(function() {
if ($window.scrollTop() < distance) {
  $("#navSymbol").remove();


}

if ($window.scrollTop() >= distance) {
  if ($("#navSymbol").length) {
    console.log("not adding")

  } else {
    $("#nav").prepend(
      "<li id=\"navSymbol\" ><a href=\"#\">▲</a></li>");
  }
}


});

});

<head>
  <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">
</head>

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

<div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;">
  <ul class="nav justify-content-center sticky-top" id="navcontent">
    <li class="nav-item">
      <a class="nav-link active" id="nav" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Staffing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Marketing and Finance</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Future Prospects</a>
    </li>
  </ul>
</div>

<div style="height: 100vw;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

请使用 remove() 函数删除任何元素，因为 jquery 给出了删除特定元素的函数。

JQuery 父位置更改时删除元素

JQuery Remove Element When Parent Position Changes

html

javascript

css

jquery

nav