scrollToggle div после прокрутки

Question

Я пытаюсь создать навигатор scrollToggle после прокрутки окна 200px.

Мой код выглядит следующим образом:

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

В идеале Navbar исчезнет после 200px и вновь появляется всякий раз, когда окно прокручиваются вверх, так что пользователь всегда может получить СЧ прокрутки вверх (даже просто немного).

Answer 1

В основном все, что вам нужно сделать, это иметь флаг или контроль toggleIt для только сделать toggleSlide() игры один раз до тех пор, как флаг true если положение прокрутки больше 200px.

То же самое для переключения слайдов анимации, когда положение прокрутки меньше или равна 200px, slideToggle() будет только играет анимацию, когда значение флага toggleIt является false, после того, как мы играем, как только мы устанавливаем значение этого флага true, так что первый slideToggle для < = 200 не будет воспроизводиться снова, и мы снова можем сыграть toggleSlide(), когда scrollTop() больше, чем 200px.

JS Fiddle

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

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

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

Answer 2

Это может послужить хорошим началом.

Я сделал это прокруткой после 300 пикселей, для эффекта - смотреть оранжевое окно.

jsFiddle Demo

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

---

Ресурсы:

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