Defining CSS based on whether user is at top or scrolled down

Defining CSS based on whether user is at top or scrolled down

I'm having a sticky navigation issue that's causing anchor links to scroll too far or not far enough, depending upon whether the page has been scrolled down in the slightest. As soon as the user starts to scroll down, the header section is reduced in height with only the navigation remaining. 

Is there a way to define CSS for an anchor based on whether the click on the nav link occurred while scrolled to top or not scrolled to top? 

Here's what I have so far, but the .anchor changes to the non-top settings as soon as the user leaves the top of the page. 

  1. $(window).scroll(function() {   
  2.    if($(window).scrollTop()) {
  3.        $(".anchor").css({"display": "block", "height": "210px", "margin-top": "-210px", "visibility": "hidden"});
  4.    } else {
  5.        $(".anchor").css({"display": "block", "height": "75px", "margin-top": "-75px", "visibility": "hidden"});
  6.    }
  7. });

  1. <!-- TOP NAV -->
  2. <li><a href="#theform">Registration Form</a></li>
  3. <li><a href="#thefaq">FAQ</a></li>

  1. <!-- THE FORM -->
  2. <span class="anchor" id="theform"></span>
  3. FORM HERE

  1. <!-- THE FAQ -->
  2. <span class="anchor" id="thefaq"></span>
  3. FAQ HERE