添加和刪​​除類到jquery onscroll

Question

我需要在滾動時為標題添加一個“固定”類，並在以下腳本中向后滾動時刪除它，但不確定如何最好地執行此操作：

<script>
    $(document).ready(function () {
        var div = $('.header');
        var div2 = $('.headerPlaceholder');
        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' : '');
            $(div2).css('display', ((p) > start) ? 'block' : 'none');
        });

    });
</script>

這會停止它在每次向下滾動后觸發事件，這是現在使用腳本中指定的CSS發生的事情，因此我需要添加一個類。

CSS：

.fixed {
position: fixed;
}

想法贊賞。

Answer 1

add / remove類方法效果很好。

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.header').addClass("fixed");
        } else {
            $('.header').removeClass("fixed");
        }
    });
});

這是一個小提琴，展示它是如何工作的： http ： //jsfiddle.net/gisheri/RpPEe/413/

Answer 2

我已經翻譯你的js使用css與1類的應用到身體

$(document).ready(function () {
    var start = $('.header').offset().top;

    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        if( p > start ) {
            $('body').addClass('fixed');
        } else {
            $('body').removeClass('fixed');
        }
    });
});

CSS

body.fixed .header {
    position: fixed;
    top: 0;
}
body.fixed .headerPlaceholder {
    display: block;
}