Question

我想在滚动窗口scrollToggle后制作导航栏200px。

我的代码如下：

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

理想情况下，导航栏会在200px后消失，并在窗口向上滚动时重新显示，因此用户可以通过向上滚动（甚至只是一点点）来获取导航。

Answer 1

基本上，您需要做的就是拥有一个标记或控件toggleIt，只要标记为toggleSlide()，如果滚动位置为true，则仅使200px次播放一次超过200px。

当滚动位置小于或等于slideToggle()时切换幻灯片动画相同，toggleIt只会在标记false值为{{1}时播放动画}，在我们播放之后，我们将该标记的值设置为true，以便＆lt; = 200的第一个slideToggle不再播放，我们可以再次播放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

这可能是一个良好的开端。

我在300px之后滚动，为了效果 - 观看橙色窗口。

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

滚动后scrollToggle div

2 个答案: