怎么让页面元素在页面滚动到某个位置后固定，即便页面在滚动，目标元素仍然能出现在设定的位置呢？

图一

图二

效果如上图。这个之前用过stickup插件来实现。

现在我们自己写代码，更加简单的代码。我也只会简单的

    $(document).ready(function() {
    //element cache
    var root = $('html, body');
    //home page welcome pic and nav bar setting
    var v_height = $('.page-nav-color').offset().top;

    $(window).bind('scroll',function(){
        if($(window).scrollTop() > v_height ) {
            $('.page-nav-color').addClass('v-fixed-top');	
        } else{
            $('.page-nav-color').removeClass('v-fixed-top');
        }
    });	
});

js代码如上

很简单的思路，先获取目标元素距离页面顶部的距离 v_height = $(‘.page-nav-color’).offset().top;

再去获取当时页面位置距离页面滚动的距离 $(window).scrollTop()

如果 $(window).scrollTop() > v_height

给目标元素page-nav-color添加对应的class，否则移除 就 ok