当前位置：懒人建站 > jquery插件 > 天猫滚动一定距离顶部显示搜索jquery插件

天猫滚动一定距离顶部显示搜索jquery插件

作者：佳明妈来源：懒人建站 2014-11-20 人气：

天猫滚动一定距离顶部显示搜索jquery插件，可以实现指定滚动距离的时候显示顶部搜索导航，模仿天猫的效果，天猫滚动一定距离顶部显示搜索插件的调用如下： $(".fix-top").fixedPointS

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天猫滚动一定距离顶部显示搜索jquery插件 - 懒人建站 http://www.51xuediannao.com/</title>
   <style type="text/css">
       html{font-size: 100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;	*overflow:auto;_overflow-x:hidden;}
       body{margin:0;}

button,.fn-tinput{margin: 0;vertical-align: middle;outline:0;background:transparent;resize:none;}
       label,button{ cursor:pointer;}
       button,input{*overflow: visible; line-height: normal; }/*修正IE67的input宽度bug*/

body,button,input,textarea,select{color:#333;}
       body,button,input,textarea,select,a{font-family:'Hiragino Sans GB','Microsoft Yahei',"WenQuanYi Micro Hei",SimSun,Tahoma,Arial,Helvetica,STHeiti;}

/*天猫滚动一定距离顶部显示搜索*/
        .fix-top{ width: 100%;  position: fixed; left: 0; z-index: 1000; height: 30px; padding: 10px; top:-52px; _display: none;}
        .fix-top-mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;   background: #000; opacity: 0.5; filter:alpha(opacity=50);}
        .fix-top .inner{ width: 1000px; position: relative; z-index: 2; margin: 0 auto;}

.fix-top .site-name{ float: left; line-height: 30px; font-size: 24px; margin-right: 50px; color: #fff;}

.fix-top .search{ height: 30px; float: left}
       .fix-top .search-key{height: 28px; display:inline-block;*display:inline;*zoom:1; vertical-align: top;  border: #fff solid 1px; background: #fff;}
       .fix-top .search input{ height: 28px; line-height: 28px9; font-size: 14px;  border: none; padding: 0 6px; width:630px;}
       .fix-top .search button{height: 30px; line-height: 30px9; font-size: 14px;}
       .fix-top .search button{ text-align: center; background: #c40000; border: #c40000 solid 1px; color: #fff;}
   </style>
</head>
<body>
<div class="fix-top">
    <div class="inner">
        <div class="site-name">tmall.com</div>
        <form class="search">
            <div class="search-key"><input type="text" placeholder="天猫搜索" class="fn-tinput"></div>
            <button type="submit">搜索一下</button>
        </form>
    </div>
    <div class="fix-top-mask"></div>
</div>

<div style="height:5000px;">
<h2>鼠标往下滚动，看效果！！！</h2>
    
    <div style="width:95%;display:block; margin:100px auto 0px auto;font-size:10pt; line-height:150%; clear:both;">
        <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站http://www.51xuediannao.com收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>
        <a href="http://www.51xuediannao.com/">懒人建站 http://www.51xuediannao.com/</a><br /><br/>
        <span> 、我们为您提供-
        <a href="http://www.51xuediannao.com/">站长素材</a>，
        <a href="http://www.51xuediannao.com/html+css/">html+css</a>，
        <a href="http://www.51xuediannao.com/js/">jquery特效</a>，
        <a href="http://www.51xuediannao.com/js/nav/">导航菜单</a>，
        <a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a>，
        <a href="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a>
        <a href="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a>
        <a href="http://www.51xuediannao.com/jquery_tanchu/">jquery弹出层</a>
        </span> <br />
        <span>懒人建站只收录实用和能提高用户体验的代码</span><br />
        <span>懒人建站致力于解放您的部分写代码时间，提高您的工作效率！</span>
    </div>

</div>

$(".fix-top").fixedPointShow({
        //zIndex:1000,   //Z轴
       // st:600         //滚动多少距离的时候出现导航
    });
})
;(function($){
    /*
    * 天猫滚动一定距离顶部显示搜索
    * 作者：懒人建站http://www.51xuediannao.com/
    * 配置参数有两个
    * zIndex:1000,        //Z轴
    * st:600               //滚动多少距离的时候出现导航
    */
    var tools={
        /*
         窗体改变(scroll resize)延时执行事件
         示例：
         $lr().TimeOutRun($(window),"scroll",runFun,2000);	//TimeOutRun(事件,要运行的函数名,间隔时间)
         function runFun(){ alert("哈哈") }
         */
        TimeOutRun:function (obj, Event, callBack, time) {
            var timeOutId = "",
                    reStart = true;
            obj.on(Event, function () {
                clearTimeout(timeOutId);
                if (reStart) {
                    timeOutRun(time)
                }
            });
            function timeOutRun(time) {
                reStart = false;
                var timeOutId = setTimeout(function () {
                    reStart = true;
                    callBack()
                }, time);
            }
        },
        log:function(log){
            if(window.console){
                return console.log(log)
            }
        }

};
    function FixedPointShow($el,config){
        var def = {
            zIndex:1000,        //Z轴
            st:600               //滚动多少距离的时候出现导航
        };
        this.opts = $.extend(true,def,config);
        this.el = $el;
    }
    FixedPointShow.prototype = {
        scrollNav:function(){
            var isOpen = false,This = this,
                fixTopH = This['el'].outerHeight();

This['el'].css({"z-index":this.opts.zIndex});

tools.TimeOutRun($(window),"scroll",function(){
                var st = $(this).scrollTop();
                if(st > This.opts.st){
                    !isOpen && This.el.animate({"top":0},400,function(){
                        isOpen = true;
                    });
                }else{
                    This.el.animate({"top":-fixTopH},400,function(){
                        isOpen = false;
                    });
                }
                tools.log(st)
            },200)
        }
    };
    FixedPointShow.prototype.constructor = FixedPointShow;

$.extend($.fn,{
        fixedPointShow:function(config){
            //IE6 返回
            if(!("maxHeight" in document.createElement("div").style)){
                $(this).remove();
                return
            }
            var fixedPointNav = new FixedPointShow($(this));
            fixedPointNav.scrollNav();
            return this;
        }
    });
}(jQuery));

</script>
</body>
</html>

天猫滚动一定距离顶部显示搜索jquery插件，可以实现指定滚动距离的时候显示顶部搜索导航，模仿天猫的效果，如果不考虑低版本兼容性，那个显示导航的动画可以使用CSS3动画来做，不过这里懒人建站偷懒了没写，直接用jquery的动画。

天猫滚动一定距离顶部显示搜索插件的调用如下：

$(".fix-top").fixedPointShow({

//zIndex:1000, //Z轴

// st:600 //滚动多少距离的时候出现导航

});

$(".fix-top") 中的 ".fix-top" 是顶部那个搜索导航的类名，换成ID 啥的也可以，只不过你要是借用我写的样式的话，就必须保留这个类名了。
参数只有两个：这里没有用到用 // 注释了，插件默认值也是这两个配置

//zIndex:1000, //Z轴

// st:600 //滚动多少距离的时候出现导航

如果你的页面上有z轴比较高的挡住这个浮动导航的话，你可以配置 zIndex:1000, //Z轴提高这个滚动一定距离顶部显示搜索插件的z轴

这个插件没有做IE6兼容性，懒人已经不关心IE6 很久了。

懒人建站http://www.51xuediannao.com/整理

↓ 查看全文

本文链接：天猫滚动一定距离顶部显示搜索jquery插件https://www.51xuediannao.com/js/jquery/809.html

天猫滚动一定距离顶部显示搜索jquery插件由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：jquery.validate.js使用之自定义表单验证规则
下一篇：jquery提交form表单插件jquery.form.js

天猫滚动一定距离顶部显示搜索jquery插件

天猫滚动一定距离顶部显示搜索jquery插件-最新评论

jquery插件-热门文章

jquery插件-推荐文章

活跃用户

天猫滚动一定距离顶部显示搜索jquery插件

天猫滚动一定距离顶部显示搜索jquery插件-相关文章

天猫滚动一定距离顶部显示搜索jquery插件-最新评论

jquery插件-热门文章

jquery插件-推荐文章

活跃用户