wap页悬浮导航及定位

1.悬浮导航

2.导航定位

html:

<div id="content">
    <div id="navbar">
        <ul><li id="nb_title">9折区&gt;</li>
            <li><a class="nb_content" href="javascript:void(0)">厨房神器</a></li>
            <li><a class="nb_content" href="javascript:void(0)">酒饮冲调</a></li>
            <li><a class="nb_content" href="javascript:void(0)">时尚家居</a></li>
            <li><a class="nb_content" href="javascript:void(0)">个护健康</a></li>
        </ul>
    </div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
    <div id="cookgoods">厨房神器</div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
    <div id="drinkgoods">酒饮冲调</div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
    <div id="homegoods">时尚家居</div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
    <div id="healthgoods">个护健康</div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
    <div id="ending">- 到此结束 -</div>
    <div id="goods" style="height: 500px; border:1px #ccc solid ; background: #f9f9f9"></div>
</div>

css:

<style>
    #nb_title{color:#fff;text-align:center}
    #navbar{height:1.067rem;background:#fff}#navbar ul{font-size:0}#navbar li{float:left}
    #nb_title{width:1.733rem;height:.627rem;border-radius:.293rem;margin:.227rem .173rem 0 .293rem;background-color:#ff4425;font-size:.4rem;line-height:.627rem}
    .nb_content{display:block;width:1.947rem;height:1.067rem;font-size:.373rem;font-weight:500;color:#333;text-align:center;line-height:1.067rem}
    #cookgoods,#drinkgoods,#healthgoods,#homegoods,#ending{width:4.307rem;height:.827rem;margin:.267rem auto;border-radius:.4rem;background-color:#ff4425;font-size:.56rem;line-height:.827rem;text-align:center;color:#fff}
    .fixation{position:fixed;top:0;left:0;z-index:9}
</style>

jq:

<script src="jquery-3.1.0.min.js"></script>
<script>
    /*悬浮窗*/
    $(function(){
        var navTop=$('#navbar').offset().top;
        //悬浮
        $(window).bind('scroll',function(){
            if(navTop<=$(window).scrollTop()){
                $('#navbar').addClass('fixation');
            }else{
                $('#navbar').removeClass('fixation');
            }
        });
        //绑定事件
        var h = $('#navbar').height();
        var topArr = [$('#cookgoods').offset().top-h,$('#drinkgoods').offset().top-h,$('#homegoods').offset().top-h,$('#healthgoods').offset().top-h];
        $('.nb_content').each(function(i){
            $(this).bind('click',function(){
                $('.nb_content').css('color','#333333');
                $(this).css('color','#ff4425');
                //跳转
                $(window).scrollTop(topArr[i]);
            });
        });
    });
</script>

页面初始化JS：https://pan.baidu.com/s/1bpNy7W7

170227优化：

<script type="text/javascript">
    //导航栏功能
    $(function ($) {
        //悬浮
        var navWidtn = parseFloat($("html").css("font-size"));
        var isScroll = true;
        var navPosition = $("#navbar").offset().top;
        $(window).on("scroll", function () {
            if(isScroll){
                $("#navbar").css({"position": "fixed", "top": 0,'z-index':9});
                if ($("#<{$setting.main_myid[0]}>").offset().top - $(window).scrollTop() <= 10) {
                    $('#navbar li').css("color", "#<{$setting.main_color[1]}>");
                    $(".nb_content").eq(0).css("color", "#<{$setting.main_color[2]}>");
                }
                if ($("#<{$setting.main_myid[1]}>").offset().top - $(window).scrollTop() <= 2*navWidtn) {
                    $('#navbar li').css("color", "#<{$setting.main_color[1]}>");
                    $(".nb_content").eq(1).css("color", "#<{$setting.main_color[2]}>");
                }
                if ($("#<{$setting.main_myid[2]}>").offset().top - $(window).scrollTop() <= 2*navWidtn) {
                    $('#navbar li').css("color", "#<{$setting.main_color[1]}>");
                    $(".nb_content").eq(2).css("color", "#<{$setting.main_color[2]}>");
                }
                if ($("#<{$setting.main_myid[3]}>").offset().top - $(window).scrollTop() <= 2*navWidtn) {
                    $('#navbar li').css("color", "#<{$setting.main_color[1]}>");
                    $(".nb_content").eq(3).css("color", "#<{$setting.main_color[2]}>");
                }
            }
            if ($(window).scrollTop()<navPosition-10) {
                $("#navbar").css({"position": "absolute"});
                if(navPosition - $(window).scrollTop()>=10){
                    $(".nb_content").css("color", '#<{$setting.main_color[1]}>');
                }
            }
        });
        //绑定事件
        window.onload=function(){
            var navHeight = ($('#navbar').height());
            var topArr = [$('#'+'<{$setting.main_myid[0]}>').offset().top-navHeight,$('#'+'<{$setting.main_myid[1]}>').offset().top-navHeight,$('#'+'<{$setting.main_myid[2]}>').offset().top-navHeight,$('#'+'<{$setting.main_myid[3]}>').offset().top-navHeight];
            $('.nb_content').each(function (i) {
                $(this).bind('click', function () {
                    //样式更改
                    isScroll = false;
                    $('.nb_content').css('color', '#<{$setting.main_color[1]}>');
                    $(this).css('color', '#<{$setting.main_color[2]}>');
                    //跳转
                    $(window).scrollTo({
                        toT: topArr[i],
                        durTime: 300
                    });
                    setTimeout(function() {
                        isScroll = true;
                    }, 300);
                });
            });
        };
        /*****************************
         ** 实现scrollTop animate 动画
         ** by zyy
         ******************************/
        $.fn.scrollTo = function(options) {
            var defaults = {
                toT: 0, //滚动目标位置
                durTime: 100, //过渡动画时间
                delay: 30, //定时器时间
                callback: null //回调函数
            };
            var opts = $.extend(defaults, options),
                timer = null,
                _this = this,
                curTop = _this.scrollTop(), //滚动条当前的位置
                subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值
                index = 0,
                dur = Math.round(opts.durTime / opts.delay),
                smoothScroll = function(t) {
                    index++;
                    var per = Math.round(subTop / dur);
                    if (index >= dur) {
                        _this.scrollTop(t);
                        window.clearInterval(timer);
                        if (opts.callback && typeof opts.callback == 'function') {
                            opts.callback();
                        }
                        return;
                    } else {
                        _this.scrollTop(curTop + index * per);
                    }
                };
            timer = window.setInterval(function() {
                smoothScroll(opts.toT);
            }, opts.delay);
            return _this;
        };
    });
</script>