Question: I am trying to make a navbar `scrollToggle` after the window is scrolled `200px`.

My code is as follows:

```
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 200){
            $('.upper-header').slideToggle('slow');
        }
    });
});

```

Ideally the navbar would disappear after `200px` and re-appear whenever the window is scrolled up, so the user can always get the nav by scrolling up (even just a little).

Answer: 
Basically all what you need to do is to have a flag or a control `toggleIt` to only make the `toggleSlide()` plays once as long as the flag is `true` if the scroll position is more than `200px`.

Same thing for toggling the slide animation when the scroll position is less than or equal to `200px`, `slideToggle()` will only plays the animation when the flag `toggleIt` value is `false`, after we play it once we set the value of that flag to `true` so that first `slideToggle` for <= 200 won't plays again, and we can again play the `toggleSlide()` when `scrollTop()` is bigger than `200px`.

[**JS Fiddle**](https://jsfiddle.net/Lbh901ud/1/)

```js
$(document).ready(function() {

    // initializing a flag to control playign the slideToggle once
    var toggleIt = true;

    $(window).on('scroll', function() {
        // if the toggleIt flag is true and the scrollTop > 200
        // play toggleSlide once, then turn the toggleIT flag to
        // false, so the animation won't keep playing.
        if (toggleIt && $(this).scrollTop() > 200) {
            $('.upper-header').slideToggle('slow');
            toggleIt = false;

        // else if the toggle flag is false and scrollTop() less
        // or equal to 200, we play the animation and toggle the 
        // toggleIt flag to false in order not to play the animation
        // more than once
        } else if (!toggleIt && $(this).scrollTop() <= 200) {
            $('.upper-header').slideToggle('slow');
            toggleIt = true;
        }
    });
});
```

```css
body {
  margin: 0; padding: 0; height: 1500px;
}

.upper-header {
  width: 100%; line-height: 50px; position: fixed; background-color: green;
  display: inline-element; color: white; text-align: center;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="upper-header">I'm the navbar</div>
```
This might provide a good start.

I made it scroll after 300px, for effect -- watch the orange window.

`[**jsFiddle Demo**](https://jsfiddle.net/wmd41Lac/)`

**JS:**

```
var st, slid=false;
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

$(window).scroll(debounce(function(){
        st = $(window).scrollTop();
    $('#rpt').html( st );

        if( !slid && st > 300){
        slid = true;
            $('.upper-header').slideToggle('slow');
        }
    if (slid && st < 100){
        slid = false;
            $('.upper-header').slideToggle('slow');
    }
}));

```

**HTML:**

```
<div class="upper-header">M a i n  H e a d e r</div>
<div id="wrap"></div>
<div id="rpt"></div>

```

**CSS:**

```
html,body{100%;}
div{position:relative;}
#wrap{height:2000px;}
.upper-header{position:fixed;top:0;left:0;width:100%;height:50px;background:#222;color:#888;}
#rpt{position:fixed;top:100px;right:0;height:40px;width:100px;background:wheat;}

```

---

Resources:

<https://davidwalsh.name/javascript-debounce-function>