前端开发多种效果的步骤总结

1、固定边栏滚动特效

第一步：

如果滚动时，右边固定，则首先设置右边栏position：fixed；原因是：fixed和absolute一样，都会脱离文档流。之后，top：0；right：0；可以让右边栏显示在最右边，且不随着滚动条的滚动而移动。

第二步：

之后要监听Windows上的滚动事件，因为右侧边栏并不是一直固定不动，而是左侧边栏滚动到一定位置之后，右侧边栏才会固定不动。因此要设置fixed的条件判断，即滚动高度+屏幕高度>边栏高度。

1、监听滚动条滚动事件方法举例：

window.οnscrοll=function(){

//变量t就是滚动条滚动时，到顶部的距离

var t =document.documentElement.scrollTop||document.body.scrollTop;

var left =document.getElementById("left");

if( t >=100) {   

 //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动

     left.style.position="fixed";     left.style.top="0";

 }else{

        //恢复正常      

  left.style.position="absolute";       

 left.style.top="100px";

}}

2、另外需要注意的是：首先需要提前触发scroll事件，否则固定边栏刚开始加载不出来，当滚动条滚动时才会加载固定边栏。其次还需要提前触发resize事件，当浏览器的窗口大小改变时，左右两侧边栏都随着浏览器的大小而变化。在jquery中，触发事件的方法是trigger。

2、返回顶部功能的实现

当点击返回顶部按钮是，scrollTop:0；即可实现返回顶部的功能；另外当返回顶部时，按钮消失；当$(window).scrollTop()>$(window).height()时，按钮出现；

$(window).on('scroll',function () {
    if($(window).scrollTop()>$(window).height()){
        back_to_top.fadeIn();
    }else
        back_to_top.fadeOut();

})

3、实现广告效果

1、右下角固定位置广告：设置其css样式，position：fixed；固定定位（相对于浏览器固定定位）（IE6不支持），固定在右下角，所以设置right：0；bottom：0；然后需要在该位置上放置一张图片，实现当图片被点击时，转到另一个页面中。所以在HTML中，用<img>加一张图片，并且让<a>包裹<img>。另外加一个关闭按钮，当鼠标点击关闭按钮时，实现关闭效果。通过getElementById来获取关闭按钮的id，然后调用onclick事件，当鼠标点击时，实现隐藏效果。style.display=none;(或者通过className属性，改变关闭按钮的class，在该class里面设置display：none；)    （鼠标滑过：onmouseover）

*   javascript:void(0);表示死链接，点击后没有任何效果。

2：顶部带关闭按钮的伸缩广告：height属性值决定高度变化，每移动一次高度增加一个值。开始移动时，display：block；当移动的高度等于广告的高度时，广告就完全展开啦。然后就要实现向上收起的效果，高度值不停的减。当高度小于等于0时，广告完全收起，顺便把block:none;

3:带缓冲效果的弹出广告：