Why is not my div shrinking

Question

I could not comment on that post, that's why I posted a similar question.(I must have at least 50 reputation for that) I wanted to know why it is not shrinking, I understood the code exactly as this question's 1st answer was and then tried to code exactly same so that the results be same but nothing happened after scrolling my div's size remained same

Here's my entire code:

    <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>

Can you create an example in codepen.io? The example does not provide us with sufficient data to figure out what the problem might be. — Rich Seviora, Feb 20 '17 at 05:58
Show the arrangement of your code resource so that exact problem could be sorted out. — Vishal Kumar Sahu, Feb 20 '17 at 06:00

score 2 · Answer 1 · answered Feb 20 '17 at 06:00

You forgot to add # before id. Replace this part of your code with this:

 $(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)
        }
      }
    });

score 1 · Answer 2 · answered Feb 20 '17 at 06:00

1

I think the issue is here:

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

here $('header_nav').data('size','small'); doesn't have # in the selector.

So change it to:

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

and try again.

answered Feb 20 '17 at 06:00

Mayank Pandeyz

25,704
4
40
59

the results are still same ,`div` is not shrinking after scrolling down. – Shreya Feb 20 '17 at 07:45
If any other solution please tell. – Shreya Feb 20 '17 at 08:16
Still the issue is there ? – Mayank Pandeyz Feb 20 '17 at 08:34
Yes it is still same. – Shreya Feb 20 '17 at 11:04

Hidayt Rahman · Accepted Answer · 2017-02-21T08:04:45.943

Updated!!!

Remove # from this line because there are one extra # $('#header_nav').data('size','small');

And no need to add this line in else section, remove this line below

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

$(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);
      }
  });
})

.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;
  }

<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>

Thank you so much it does work now but.. when I scroll up again it remains shrinked. — Shreya, Feb 20 '17 at 12:07
Anytime :) Could you please explain why you giving condition like this in else `$('#header_nav').data('size') === ('small'))` There is no need to add this, now check the updated snippet — Hidayt Rahman, Feb 21 '17 at 08:06

Why is not my div shrinking

Here's my entire code:

3 Answers3