jquery的固定顶部插件

最新推荐文章于 2022-04-08 09:05:22 发布

zhuce66ci

最新推荐文章于 2022-04-08 09:05:22 发布

阅读量296

点赞数

分类专栏： web前端 javascript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/zhuce66ci/article/details/79578090

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

/*********************************************************
*   jquery xyd plug in
*********************************************************/
(function($){
   $.fn.extend({
       setElementFixed : function(){
           /*
           *   设置div根据滚动条自动跟随
           *   需要提前设置css，分别制定top和left属性
           *    xydAutoFixed class是预留做div阴影效果
           */
           var $this = $(this),
               parent = $this.parent(),
               elementIsFixed = "none";

           //设置元素尺寸
           function setPX(){
               //设置宽度和高度
               $this.css({
                   "width":(parent.outerWidth())+"px",
                   "top":"0",
                   "left":parent.offset().left+"px"
               });

               //设置父层的宽度和高度
               parent.css({"height":$this.outerHeight()+"px"});
           }


           $(window).scroll(function (){
               setScrollTop();
           });

           $(window).resize(function(){
               setPX();
               setScrollTop();
           });

           $(document).ready(function(){
               setPX();
               setScrollTop();
           });
           function setScrollTop(){

               if($(window).scrollTop()>(parent.offset().top+$this.outerHeight()+30)){
                   if(elementIsFixed!="fixed"){
                       elementIsFixed = "fixed";

                       $this
                           .addClass("xydAutoFixed")
                           .css({
                               "position":"fixed",
                               "top":"0",
                               "left":parent.offset().left+"px",
                               "display":"none"
                           })
                           .stop()
                           .slideDown(300);
                   }

               }else{
                   elementIsFixed = "none";
                   $this.css({"position":"relative","top":"0","left":"0"});
                   $this.removeClass("xydAutoFixed");
               }
           }

       },
       hoverDelay : function(options) {
           /**
           * 鼠标延迟
           */
           var defaults = {
               hoverDuring: 200,
               outDuring: 200,
               hoverEvent: function() {
                   $.noop();
               },
               outEvent: function() {
                   $.noop();
               }
           };
           var sets = $.extend(defaults, options || {});
           var hoverTimer, outTimer;
           return $(this).each(function() {
               $(this).hover(function() {
                   clearTimeout(outTimer);
                   hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
               }, function() {
                   clearTimeout(hoverTimer);
                   outTimer = setTimeout(sets.outEvent, sets.outDuring);
               });
           });
       }

   });
})(jQuery);