Question

我正在尝试使用id removeNav获取div并再次将其粘贴回来。但我的div是未定义的。

function init() {
    var insertMenu =  $("#removeNav").html();
    console.log(insertMenu);

    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector(".navbar-collapse"),
            removeNav = document.getElementById('removeNav'),
            insertNav = document.getElementById('insertNav'),
            body = document.querySelector("body");

            //var insertMenu = '<div id="removeNav" class="navbar-collapse collapse header"><img class="navbar-left" src="img/MRS_Logo_WEB_Interlaced.png" width="120" height="96"> <ul class="nav navbar-nav navbar-right"> <li class="divider-vertical"></li> <li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li> <li class="divider-vertical"></li> <li><a href="#contact">Download</a></li> <li class="divider-vertical"></li> <li class="divider-vertical"></li> <li><a href="#about">Karriere</a></li> <li><a href="#contact">Sitemap</a></li> <li class="divider-vertical"></li> <li><a href="#contact">Impressum</a></li> <li class="divider-vertical"></li> <form class="navbar-form navbar-right"> <div class="form-group"> <input class="form-control" placeholder="Suchen" type="text"> </div> <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> </form> </ul></div>';

        if(distanceY > shrinkOn){
            classie.add(header, "smaller");
            removeNav.parentNode.removeChild(removeNav);
        } else {
            if (classie.has(header, "smaller")) {
                classie.remove(header, "smaller");
                insertNav.innerHTML = insertMenu;
            }
        }
    });
}
window.onload = init();

我的代码： https://jsfiddle.net/t23nn1pp/

Answer 1

您正在将jQuery与vanilla JS混合，请更改此行：

var insertMenu =  $("#removeNav").html();

代表

var insertMenu =  document.querySelector("#removeNav").innerHTML;

下面的代码段（更改了console.log以获取针对演示的警报）

＆＃13;

function init() {
  var insertMenu = document.querySelector("#removeNav").innerHTML;
  alert(insertMenu);

  window.addEventListener('scroll', function(e) {
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 300,
      header = document.querySelector(".navbar-collapse"),
      removeNav = document.getElementById('removeNav'),
      insertNav = document.getElementById('insertNav'),
      body = document.querySelector("body");

    if (distanceY > shrinkOn) {
      classie.add(header, "smaller");
      removeNav.parentNode.removeChild(removeNav);
    } else {
      if (classie.has(header, "smaller")) {
        classie.remove(header, "smaller");
        insertNav.innerHTML = insertMenu;
      }
    }
  });
}
window.onload = init();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>

<div id="insertNav">
  <div id="removeNav" class="navbar-collapse collapse header">
    <a href="index.html"><img class="navbar-left img-responsive logo-margin" src="img/MRS_Logo_WEB_Interlaced.png" height="96" width="120" /></a>
    <ul class="nav navbar-nav navbar-right">
      <li class="divider-vertical"></li>
      <li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li>
      <li class="divider-vertical"></li>
      <li><a href="#contact">Download</a></li>
      <li class="divider-vertical"></li>
      <li class="divider-vertical"></li>
      <li><a href="#about">Karriere</a></li>
      <li><a href="#contact">Sitemap</a></li>
      <li class="divider-vertical"></li>
      <li><a href="#contact">Impressum</a></li>
      <li class="divider-vertical"></li>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Suchen">
        </div>
        <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
      </form>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

jsFiddle：https://jsfiddle.net/t23nn1pp/6/

我知道我的修复程序与原始代码相差无几，但您是否尝试过隐藏并显示导航栏？

的jQuery

SftpFileSytemInformation GetStatus(string path)

CSS例如

function init() {
    var $insertMenu = $("#removeNav");

    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset;
        var shrinkOn = 100;

        if(distanceY > shrinkOn){
            $insertMenu.hide();
        } else {
            $insertMenu.show();
        }
    });
}
window.onload = init();

Html与您提供的相同。

Answer 3

更新
使用提供的链接运行代码，有一些缺失。
- jQuery
- 经典

至于jQuery，您可以尝试添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

如果您按照其他人的建议修复（或移除），它将会起作用。

Javascript获取div / Insert Div

3 个答案: