Question

我无法评论that post，这就是我发布类似问题的原因。（我必须至少有50个声誉）我想知道为什么它没有缩小，我完全理解代码this question's第一个答案是然后尝试编码完全相同，以便结果相同但滚动div后没有任何反应大小保持不变

这是我的整个代码：

    <html>
  <div id="header_nav"></div>
  <div class="container">
    ....
  </div>
  </html>
  <style>
     .container{padding-top:100px;}
  body {
    height: 500px;s
    width: 100%;s
    background-color: #00000;
  }

  #header_nav {
    width: 100%;
    height: 100px;
    background-color: #666;
    position: fixed;
    top: 0;
    left: 0;
  }

  </style>
  <script>
  $(function(){
    $('#header_nav').data('size', 'big');
  });

  $(window).scroll(function(){
      if ($(document).scrollTop() > 0) {
        if ($('#header_nav').data('size') === ('big')) {
          $('##header_nav').data('size','small');
          $('#header_nav').stop().animate({
            height: '40px'
          }, 600);
        }
      }
      else{
        if ('#header_nav'.data('size') === ('small')) {
          $('#header_nav').data('size','big');
          $('#header_nav').stop().animate({
            height: '100px'
          }, 600)
        }
      }
    });
  </script>

Answer 1

您忘记在ID之前添加#。用以下代码替换这部分代码：

 $(window).scroll(function(){
      if ($(document).scrollTop() > 0) {
        if ($('#header_nav').data('size') === ('big')) {
          $('#header_nav').data('size','small');
          $('#header_nav').stop().animate({
            height: '40px'
          }, 600);
        }
      }
      else{
        if ('#header_nav'.data('size') === ('small')) {
          $('#header_nav').data('size','big');
          $('#header_nav').stop().animate({
            height: '100px'
          }, 600)
        }
      }
    });

Answer 2

我认为问题在于：

if ($('#header_nav').data('size') === ('big')) {
    $('header_nav').data('size','small');
    $('header_nav').stop().animate({
        height: '40px'
    }, 600);
}

此处$('header_nav').data('size','small');在选择器中没有#。

所以改成它：

$('#header_nav').data('size','small');

再试一次。

Answer 3

<强>已更新！

从此行中删除＃，因为还有一个额外的＃$('#header_nav').data('size','small');

无需在else部分添加此行，请删除此行

if('#header_nav').data('size') === ('small')) {      $('#header_nav').data('size','big');}

＆＃13;

$(document).ready(function(){
 $('#header_nav').data('size', 'big');
 
 $(window).scroll(function(){
      if ($(document).scrollTop() > 0) {
        if ($('#header_nav').data('size') === ('big')) {
          $('#header_nav').data('size','small');
          $('#header_nav').stop().animate({
            height: '40px'
          }, 600);
        }
      }
      else{
       // Just add animate function only without any condition
        $('#header_nav').stop().animate({
            height: '100px'
          }, 600);
      }
  });
})

＆＃13;

.container{padding-top:100px;}
  body {
    height: 500px;
    width: 100%;
    background-color: #00000;
  }

  #header_nav {
    width: 100%;
    height: 100px;
    background-color: #666;
    position: fixed;
    top: 0;
    left: 0;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <div id="header_nav"></div>
  <div class="container">
  </div>
  </html>

＆＃13;

为什么我的div没有缩小

这是我的整个代码：

3 个答案: