Javascript Changing Css Elements

Question

I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):

jQuery

if ($document).scrolltop() > 132){
  $("#navbar").css("position", "fixed");
  $("#navbar").css("top", "132px");
}
else{
  $("navbar").css("position","static");
}

Is there something I am missing?

Thanks in advance,

Bradon

Edit:

I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:

<script type="text/javascript">
            var navbar = $("#navbar");
            navbar.on("scroll", function(e){
                if (navbar.scrollTop() <= 0){
                    navbar.css("position", "fixed");
                    navbar.css("top", "0px");
                }
                else{
                    navbar.css("position","static");
                }
            });
</script>

I still can't get it to work properly.

Edit 2:

I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:

<script type="text/javascript">
            var navbar = jQuery("#navbar");
            jQuery(document).on("scroll", function(e){
                if (jQuery(document).scrollTop() > 280){
                    navbar.css("position", "fixed");
                    navbar.css("top", "0px");
                }
                else{
                    navbar.css("position","static");
                    navbar.css("top", "auto");
                }
            });
</script>

this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!

Can you by any chance dump your code into a codepen, I'll take a look at it and fix it. — zsawaf
– zsawaf, Commented Jul 20, 2016 at 18:51
are you including the jquery library? have you checked whether there are any messages on the javascript console? — Woodrow Barlow
– Woodrow Barlow, Commented Jul 20, 2016 at 18:51
please include all information we need to replicate your problem. see: How to create a Minimal, Complete, and Verifiable Example. — Woodrow Barlow
– Woodrow Barlow, Commented Jul 20, 2016 at 18:52
Have you affixed this to a listener event like $(window).scroll() The code you've presented us wouldn't actually do anything if a user had to scroll down. — Robert
– Robert, Commented Jul 20, 2016 at 18:55
Thank-you everyone for the quick replies. I have now tried to fix it to a listener event as described above, but can't get it to work still. I will edit the code into my original post. I checked the console with the new code and it said "240 Uncaught TypeError: $ is not a function" (line 240 contains the line with " var navbar = $("#navbar"); " — Bradon Lodwick
– Bradon Lodwick, Commented Jul 20, 2016 at 19:21

Matthew Kiefer · Accepted Answer · 2016-07-20 18:57:54Z

1

There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:

wrap = $('#wrap');

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.

answered Jul 20, 2016 at 18:57

Matthew Kiefer

2091 silver badge6 bronze badges

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

3 Comments

Bradon Lodwick Over a year ago

Thank-you very much, I didn't have anything like that set up. I have posted an edited version in my original post that I still can't get to work properly.

Matthew Kiefer Over a year ago

It looks like you are attaching the scroll listener to "navbar". You need to attach the scroll listener to the div that contains the information that is scrolling up and down the screen. Can you attach the html code that contains the div elements as well?

Bradon Lodwick Over a year ago

I figured it out! Thank-you for pointing out that it was attached to the navbar, because I realized after that its scrollTop value was never changing. I will edit my final code into my post.

GunWanderer · Accepted Answer · 2016-07-20 18:53:34Z

0

I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.

<script type="text/javascript">
            if ( $(document).scrollTop() > 132){
                $("#navbar").css("position", "fixed");
                $("#navbar").css("top", "132px");
            }
            else{
                $("#navbar").css("position","static");
            }
</script>

answered Jul 20, 2016 at 18:53

GunWanderer

3341 silver badge7 bronze badges

Collectives™ on Stack Overflow

Javascript Changing Css Elements

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related