Question

我的目标是在div中向下滚动时div内的图像变小。我在体内做了一个有效的例子但不是在div中。 https://jsfiddle.net/53u2e86m/

HTML：

<div class="header">
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/2000px-LEGO_logo.svg.png" id="logo">
</div>
<br>
<br>
<br>
<!-- more brs ... -->

CSS

body {
  text-align: center;
}

.header {
  width: 100%;
  padding: 10px 0;
  text-align: center;
}

#logo {
  height: 300px;
  -webkit-transition: height .5s;
  transition: height .5s;
}

和JS

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 25,
            logo = document.getElementById("logo");
        if (distanceY > shrinkOn) {
            logo.style.height="150px";
        } else {
            if (distanceY < shrinkOn) {
                logo.style.height="300px";
            }
        }
    });
}
window.onload = init();

现在我想在我的项目中实现它，我正在使用mdl框架。问题是，当我把它放在主div支架（<div class="mdl-layout mdl-js-layout">一个）时，身体根本不会滚动。原因是因为主要的mdl div和你的屏幕一样大，没有更大的内容和内容滚动。所以我尝试将滚动事件监听器设置为div，但没有任何效果。这是我的HTML：

   <!-- START OF MAIN DIV -->
    <div id="mainDiv" class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">

      <!-- header -->
      <div class="header"> 
        <img id="logo" src="pic/logo.png" alt="logo">

      </div>  

      <header class="mdl-layout__header mdl-layout__header--transparent ">
        <div class="mdl-layout-icon"></div>
        <div class="mdl-layout__header-row">
          <div class="mdl-layout-spacer"></div>
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="#">Home</a>
            <a class="mdl-navigation__link" href="#">About</a>
            <a class="mdl-navigation__link" href="#">Comments</a>
            <a class="mdl-navigation__link" href="#">Pictures</a>
            <a class="mdl-navigation__link" href="#">Activities</a>
          </nav>
          <div class="mdl-layout-spacer"></div>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout__title">Website</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="#">Home</a>
          <a class="mdl-navigation__link" href="#">About</a>
          <a class="mdl-navigation__link" href="#">Comments</a>
          <a class="mdl-navigation__link" href="#">Pictures</a>
          <a class="mdl-navigation__link" href="#">Activities</a>
        </nav>
      </div>
<br>
<br>
<br>
<br>
<!-- lots more <br> -->
    </div>
    <!-- END OF MAIN DIV -->

这是我的CSS

.header {
  width: 100%;
  padding: 10px 0;
  text-align: center;
}

#logo {
  height: 150px;
  -webkit-transition: height .5s;
  transition: height .5s;
}

我的JS

mainDiv.onload=function(){
var mainDiv = document.getElementById("mainDiv");
function init() {
    mainDiv.addEventListener('scroll', function(e){
        var distanceY = mainDiv.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 25,
            logo = document.getElementById("logo");
        if (distanceY > shrinkOn) {
            logo.style.height="150px";
        } else {
            if (distanceY < shrinkOn) {
                logo.style.height="300px";
            }
        }
    });
}
mainDiv.onload = init();


}

我只是不工作，我得到一个错误说未捕获的ReferenceError：未定义mainDiv（匿名函数）@main.js：2 我已经非常沮丧，因为我已经搜遍了所有地方，但仍然无法让它发挥作用。任何帮助，将不胜感激。

编辑：JSFiddle中无效的https://jsfiddle.net/fe04kLf0/4/。

滚动div事件监听器不能使用纯JS

0 个答案: