• 滚动监听+导航固顶


    css

    /*固顶导航*/
    .z_static_top{
        width:100%;
        background:#fff;
        z-index: 99999;
        padding-top:20px;
        padding-bottom:20px;
    }
    .z_fixed{
        box-shadow: 0px 5px 5px rgba(0,0,0,0.07);
        position: fixed;
        top:0;
        margin-bottom: 100px;
    }

    js:

    //滚动监听事件 + 固顶导航
        $(window).scroll(function() {
            var top = $(window).scrollTop();
            if(top>=850){
                $(".z_static_top").addClass("z_fixed");
            }else{
                $(".z_static_top").removeClass("z_fixed");
            }
        });
    /*    $(".z_md1").click(function(){
            var t = $(window).scrollTop();
            $('body,html').animate({'scrollTop':t+200},100)  //单击一处 不停地往下滚动
        })*/
    })
    //锚点平滑滚动
    jQuery(document).ready(function($){
        $('.z_md1').click(function(){
            $('body,html').animate({'scrollTop':791},100);
        });
        $('.z_md2').click(function(){
            $('body,html').animate({'scrollTop':1500},100);
        });
        $('.z_md3').click(function(){
            $('body,html').animate({'scrollTop':2334},100);
        });
        $('.z_md4').click(function(){
            $('body,html').animate({'scrollTop':3159},100);
        });
        $('.z_md5').click(function(){
            $('body,html').animate({'scrollTop':3959},100);
        });
        $('.z_md6').click(function(){
            $('body,html').animate({'scrollTop':4419},100);
        });
        $('.z_md7').click(function(){
            $('body,html').animate({'scrollTop':4895},100);
        });
        /*$('.z_md3').click(function(){$('html,body').animate({scrollTop:$('#z_md3').offset().top}, 1000);});
        $('.z_md7').click(function(){$('html,body').animate({scrollTop:$('#z_md7').offset().top}, 1000);});*/
  • 相关阅读:
    Flash 全局安全性设置面板
    响应式布局的一个例子mark
    移动平台WEB前端开发技巧汇总
    自定义事件机制——观察者模式
    学习之响应式Web设计:Media Queries和Viewports
    常用栅格布局方案
    观察者模式的一个例子
    二进制文件转换为文本工具
    C#面向对象名词比较(二)
    MSN消息提示类
  • 原文地址:https://www.cnblogs.com/wolflower/p/6986304.html
Copyright © 2020-2023  润新知