javascript - 如何使用 jQuery 构建简单的粘性导航？

Question

我试图在滚动时更改 div 的 css。这是我的代码，但不幸的是它不起作用。

$(document).ready(function() {
   $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
            $('#subnav').css({
                'position' : 'fixed',
                'top' : '0'
            });
        } else {
            $('#subnav').css({
                'position' : 'static',
                'top' : 'auto'
            });
        }
    });
 });

Answer 1

尝试这个：

这是工作的jsFiddle

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 150) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'auto'});
        }
    });
 });

注意：如果你只有一个值可以使用else，但如果你有多个值我建议不要使用else，因为它会产生冲突，使用else ifintead。