jQuery：当用户滚动过去一个点时滑动标题答案

【问题标题】：jQuery: slide header when user scrolls past a pointjQuery：当用户滚动过去一个点时滑动标题
【发布时间】：2013-09-12 22:13:18
【问题描述】：

我有以下 jQuery 代码：

if($(window).scrollTop()>=220) {
                    $('#header nav').slideUp('fast').removeClass('fixed');
                } else {
                    $('#header nav').addClass('fixed').slideDown('fast');
                }

发生的情况是，当用户向下滚动页面超过 220 像素时，标题将获得固定类，然后向下滑动。当用户再次向上移动时，标题将向上滑动并移除其固定类。用户将永远不会看到标题移回其原始位置，因为它在 180 像素左右完成，因此不在屏幕上。

但问题是，当用户滚动时，它会一遍又一遍地滑动，这不是我想要的。我已经查看了 stop 方法，但停止当前动画也不是我需要的。关于如何解决这个问题的任何想法？

上面的代码是这样调用的函数：

$(window).scroll(function() {
                    fixedHeader();
                });

【问题讨论】：

标签： jquery

【解决方案1】：

您希望更改 if($(window).scrollTop()>=220) { 行以检查用户是否已从 0-220 转换为 220+ 或反转，而不是使用每个滚轮。

有很多cmets的示例教程可以是found here.

【讨论】：

你能分享一个例子吗？我已经对此进行了相当多的修改，它要么破坏它，要么做同样的事情。
有一个example here with lots of commenting，我希望能稍微澄清一下。 JavaScript 的第 33 行左右是适用逻辑发生的地方

【解决方案2】：

这样做可以解决问题：

if(!$('#header nav').hasClass('fixed')) {
                        $('#header nav').addClass('fixed').slideDown('fast');
                    }

【讨论】：

【解决方案3】：

此资源可能会对您有所帮助：Scroll Activated slide Down

$(function() {
    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {
        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '0px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});

【讨论】：

【解决方案4】：

试试这样的方法，它对我有用。

<SCRIPT>
$(document).ready(function() {

var div = $('#header');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(div).css('position',((p)>start) ? 'fixed' : 'static');
    $(div).css('top',((p)>start) ? '0px' : '');
});

});
</SCRIPT>

取自 Fixed Header

【讨论】：

我已经有这个功能了！我的问题是让它在每次用户滚动时滑动而不继续滑动。
那么您没有发布所有代码。用我告诉你的关于link 的代码试试这个jsfiddle。这是您的代码link。如您所见，第一个示例不会继续滑动，而您的示例代码甚至不会滑动。