js 固定悬浮效果实现思路代码

代码如下:

<script type="text/javascript">
(function($){
var ele_fix = $("#div_right"); //浮动窗口
var _main = $(".main"); //浮动区域
var ele_offset_top = ele_fix.offset().top; //浮动区域高度
$(window).scroll(function(){
var scro_top = $(this).scrollTop(); //当前高度
var fix_foot_pos = parseInt(ele_fix.height())+parseInt(scro_top)-10; //浮动框最底部到最顶部高度
var mainpos = parseInt(_main.offset().top)+parseInt(_main.height());
if(scro_top <= ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "static", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "fixed", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos>mainpos){
var posi = mainpos-fix_foot_pos-10;
ele_fix.css({position: "fixed", top: posi});
}
});

/*

//方案二
$(window).bind("scroll",function() {
var temp = '1165';
//判断往下滚
if ($(document).scrollTop() > temp) { //如果大于这个高度，就置顶
flag = false;
$('#div_right').css({'position':'fixed', 'top':'-10px', 'margin-top':'0px'});
}

if ($(document).scrollTop() <= temp) { //如果小于这个高度，则恢复原来状态
flag = true;
$('#div_right').css('position','');
}
});

*/

})(jQuery);
</script>

赞 (0)

相关推荐

  • javascript 获取页面的高度及滚动条的位置的代码

    复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

  • JS简单实现DIV相对于浏览器固定位置不变的方法

    本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Anchor Properties</title> <meta http-equiv="Content-Type" content=&q

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • javascript 精确获取页面元素的位置

    javascript 精确获取页面元素的位置

    复制代码 代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop; } 貌

  • js实现简单的左右两边固定广告效果实例

    本文实例讲述了js实现简单的左右两边固定广告效果的方法.分享给大家供大家参考.具体分析如下: 大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说. 要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到. 要点二: 复制代码 代码如下: adleft.style.top=adtop+(document.documentElement.scroll

  • js中的如何定位固定层的位置

    js中的如何定位固定层的位置

    需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0:如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 复制代码 代码如下: var top=document.documentEl

  • js固定DIV高度,超出部分自动添加滚动条的简单方法

    复制代码 代码如下: function setheight()     {     var div=document.getElementById("event_basicInfo");     //div.style.width="40%";     div.style.height=400;     div.style.overflow="auto";     }     window.onload=setheight;

  • js DIV滚动条随机位置的设置技巧

    style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

  • js，jquery滚动/跳转页面到指定位置的实现思路

    要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <

  • JS实现固定在右下角可展开收缩DIV层的方法

    本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

随机推荐