jquery scrolltop script not working

Question

My ultimate goal is to get my header to switch from a position of relative to fixed when the window gets to a certain point. In trying to get there I came up with this function which doesn't give my any errors but also dosen't appear to do anything. Could someone help me understand why? It's the last script loaded on the page and jquery is called before it..

<script type="text/javascript">
$(function() {
var $window = $(window);
function top() {
var $top = $window.scrollTop();
if( $top > 100 ) {
    $("header").css("position","absolute"); 
}
else {
    $("header").css("position","fixed");    
}
};
});
</script>

What if i wanted to limit it to mobil applications? shouldn't something like this work...

<script type="text/javascript">
 $(function() {
     var $window = $(window).width();
     function windowWidth() {
         if ( $window < 480 ) {
      function top() {
          var $top = $window.scrollTop();
          if( $top > 100 ) {
             $("header").css("position","absolute"); 
           }
           else {
              $("header").css("position","fixed");    
          }
     };
     $(window).scroll(top);
         }
     };
   });
</script>

Anoop · Accepted Answer · 2013-04-13 20:02:23Z

1

Use $(window).scroll(top) or use setTimeInterval(top, 100);

Assuming header as id

<script type="text/javascript">
 $(function() {
     var $window = $(window);
      function top() {
          var $top = $window.scrollTop();
          if( $top > 100 ) {
             $("#header").css("position","absolute"); 
           }
           else {
              $("#header").css("position","fixed");    
          }
     };
     $(window).scroll(top);
   });
</script>

edited Apr 13, 2013 at 20:02

answered Apr 13, 2013 at 18:57

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Styphon Over a year ago

Window resize will only work if the window changes size. It doesn't track the position of the scroll bar.

Anoop Over a year ago

@Styphon My intentation was scroll by mistake I wrote resize.

Stephen Crane Over a year ago

Thanks for the help! I took your code and put it in and it works great. Now i'm wondering how i would limit it when in happens to when it's viewed by mobil phones. I changed it up a bit but not getting much luck.

Anoop Over a year ago

@StephenCrane header is a class or id? If it is class use $(".header") and if it is id use $('#header')

Stephen Crane Over a year ago

@Sushil Neither it's the html header tag.

|

Community · Accepted Answer · 2017-05-23 11:43:18Z

0

The reason it's not doing anything is you're not calling it. You have nothing to trigger the code. I assume it's this script you found. If you notice it's wrapped in a $(window).scroll, instead of just function, to trigger it.

You need to modify your code thusly:

$(window).scroll(function() {
    if($(window).scrollTop() > 100) {
        $("header").css("position","absolute"); 
    } else {
        $("header").css("position","fixed");    
    }
});

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Apr 13, 2013 at 19:02

Styphon

10.5k9 gold badges54 silver badges87 bronze badges

Comments

Jai · Accepted Answer · 2013-04-13 19:03:58Z

0

I think you have not called the .scroll() function anywhere in the given code so it never going to be fired:

<script type="text/javascript">
  $(function() {
     var $window = $(window);
     function top() {
        var $top = $window.scrollTop();
        if( $top > 100 ) {
            $("header").css("position","absolute"); 
        }else {
            $("header").css("position","fixed");    
        }
     };
     $window.scroll(top);
  });
</script>

answered Apr 13, 2013 at 19:03

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

jquery scrolltop script not working

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related