在浏览博客的时候,比如我的博客有主体栏和侧栏两栏,有时候文章或者说什么使得主体栏很长,拉到底下的时候感觉侧栏部分空空荡荡,很凉快不舒服。于是我派出了jquery,把侧栏的一部分变得能在窗口拉到下面的时候跟随着窗口了。

从网上可以找到如下的代码

jQuery(document).ready(function($){   
$.fn.smartFloat = function() {   //jQuery的原型扩展
    var position = function(element) {   
        var top = element.position().top, pos = element.css("position");   
        $(window).scroll(function() {   
            var scrolls = $(this).scrollTop();   
            if (scrolls > top) {   
                if (window.XMLHttpRequest) {   
                    element.css({   
                        position: "fixed",   
                        top: 0   
                    });       
                } else {   
                    element.css({   
                        top: scrolls   
                    });       
                }   
            }else {   
                element.css({   
                    position: "absolute",   
                    top: top   
                });       
            }   
        });   
    };   
    return $(this).each(function() {   
        position($(this));                            
    });   
};   
  
//绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
$(".widget_bd_random_post_widget").smartFloat();   
  
});  

这个代码把所要跟随的元素用改变其绝对位置的方式,而如果这样做,页面在移动响应时会发生意外的错误。
下面提供我选择使用的代码:
侧栏跟踪1.0

jQuery(document).ready(function($){   
//将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
    var $sidebar   = $("aside[id^=zan_sets]"),  $window    = $(window),
        topPadding = 95,
        offset     = $sidebar.offset(); 
    
    $window.resize(function() {
        offset     = $sidebar.offset(); 
    });
    $window.scroll(function() {  
	
        if ($window.scrollTop() + topPadding > offset.top) {      
            $sidebar.stop().animate({      
                marginTop: $window.scrollTop() - offset.top + topPadding      
            });      
        } else {      
            $sidebar.stop().animate({      
                marginTop: 0      
            });      
        }      
    });      
     
});   

此代码逻辑显而易见,$window.scroll监听滚动事件,当$window.scrollTop() + topPadding需要显示的侧栏元素在下拉过头时停留的位置大于offset.top侧栏下拉没过头时自己的位置大时,改变侧栏元素的上边距marginTop。而因为相应式窗体的缘故,整个窗口的高度会发生变化,这个时候如果不改变offset也会出现奇怪的bug,所以加入了$window.resize的监听代码,虽然仍然会发现有时候侧栏元素会跑到好远的地方,但在滚动后会乖乖回来,属于可以容忍的可爱的bug

如果想要侧栏两个模块一起动,可以这样写:
侧栏跟踪2.0

jQuery(document).ready(function($){   
//将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
    var $window    = $(window),
        window_width = $window.width();
        topPadding = 95,
        $sidebaritem0 = $("aside[id^=zan_rand_posts]"),
        item0offset   = $sidebaritem0.offset(),
        gap = 30,
        $sidebaritem1 = $("aside[id^=zan_sets]"),   
        item1offset   = $sidebaritem1.offset();
        
    $window.resize(function() {
            $sidebaritem0.stop().animate({      
                marginTop: 0      
            },500,function(){
                item0offset = $sidebaritem0.offset(); 
            }); 
            $sidebaritem1.stop().animate({      
                marginTop: 0      
            },500,function(){
                item1offset = $sidebaritem1.offset(); 
            });    
    });
    $window.scroll(function() {  
        // 防止过头
        if ($(document).height() < $window.scrollTop() + topPadding + $sidebaritem0.height() + gap + $sidebaritem1.height() + 117 + 30)
        return;
        if ($window.scrollTop() > item1offset.top) {
            $sidebaritem0.stop().animate({
               marginTop: $window.scrollTop() - item1offset.top + topPadding + $sidebaritem0.height() + gap
            });
        } else {   
            $sidebaritem0.stop().animate({      
                marginTop: 0      
            }); 
            $sidebaritem1.stop().animate({      
                marginTop: 0      
            });      
        }      
    });      
     
});     

参考:为WordPress的侧栏小工具增加浮动跟随效果

「Unity Shaders」Surface Shaders and Texture Mapping

 本文内容参考《Unity 5.x Shaders and Effects Cookbook》 表面着色器和材质贴图 总的来说,一个表面着色器有两个关键的步骤。第一,必须确定材质的物理...

阅读全文

「Unity Shaders」Creating First Shader

创建第一个着色器 最近学习了一段时间Unity Shader相关知识,在进一步自顶向下学习计算机图形学之前,先将之前看《Unity 5.x Shaders and Effects Cookbook...

阅读全文

《Effective c++》、《Inside C++ Model》 小结(一)

最近瞻仰了一下Scott Meyers久负盛名的《effective c++》,特来总结一下,以加深一下印象与防止自己今后记忆力衰退。这本书里很多都是工程上很有意思的tips...

阅读全文

3 条评论

欢迎留言