Asia小程

导航

鼠标滚动div固定浮动-加锚点

页面:
    <div class="pa">
        <div class="w-95-sl bdl-2"><a>标题1</a></div>
        <div class="w-95"><a data-index="_kfmessage">标题2</a></div>
        <div class="w-95"><a data-index="_ctmessage">标题3</a></div>
        <div class="w-95"><a data-index="_jtaddress">标题4</a></div>
        <div class="w-95"><a data-index="_sjimage">标题5</a></div>
        <div class="w-95"><a data-index="_cdintroduce">标题6</a></div>
        <div class="w-95" style="width: 146px"><a data-index="_cdfacility">标题7</a></div>
        <div class="clera">
    </div>

浮动样式:
    .fixedNav{ position:fixed; position:fixed ; left:50%; top:0px; z-index:1000; margin-left:-501px; margin-top:0px; }
    
浮动javascript:
    <script type="text/javascript">
        $(function myfunction() {
            var offsetTop = $(".pa").offset().top;
            $(window).scroll(function () {
                var _top = $(document).scrollTop();
                if (offsetTop < _top) {
                    $(".pa").addClass("fixedNav");
                } else {
                    $(".pa").removeClass("fixedNav");
                }
            })
        });
    </script>
锚点滚动javascript:
    <script type="text/javascript">
        $(function () {
            $(".pa a").click(function () {
                //$(this).siblings().removeClass("current");
                //$(this).addClass("current");
                var el = $(this).attr('data-index');
                $('html, body').animate({
                    scrollTop: $("#lab" + el).offset().top - 50
                }, 500);
            });
        });
    </script>

posted on 2015-05-12 20:22  Asia小程  阅读(566)  评论(0编辑  收藏  举报