Jquery监听器

使用Jquery监听器监听高度，然后使其滑动到一定高度下置顶。

$ (window).scroll(function (){     //监听页面滚动事件
        // var headerHeight = $ ('.navbar').outerHeight(); // 获取头部元素的高度
        var scrollTop = $ (window).scrollTop();
        console.log(scrollTop)
    });

.navbar是我的导航栏的class，

所监听到的高度是300，当他划到导航栏所在的位置时，他就置顶

$(window).scroll(function(e) {
        var $el = $('.navbar');
        var isPositionFixed = ($el.css('position') == 'fixed');
        if ($(this).scrollTop() > 420 && !isPositionFixed) {
            $el.css({'position': 'fixed', 'top': '0px'});
            $('.navbar').css ('width', '90%');
        }
        if ($(this).scrollTop() < 420 && isPositionFixed) {
            $el.css({'position': 'static', 'top': '0px'});
            $('.navbar').css ('width', '100%');
        }
    });

这是置顶的代码

if (scrollTop >= 0 && scrollTop <= 829) {
            $ ("#b_line_one").addClass('c_line')
            $ ("#nav-item_one").css('color','rgb(227, 30, 11)')
        }

这个是加在监听器中，若到达一定高度，导航栏中的红色光标会随之移动

在500时他置顶了

划到这个位置时，光标显示到了户型的位置。