jquery根据滚动条把DIV固定在某一个位置的问题

各位大牛，小弟正在做一个网站，想实现下面两个网站的一个功能，请各位大牛帮帮我，先谢谢啦！
网站： http://www.smzdm.com/youhui/447901
jquery根据滚动条把DIV固定在某一个位置的问题

就是上面图片中这一块，暂时命名为A！
主要分为两个功能：
1、当浏览器滚动条，滚动到A时，A固定在浏览器顶部（这个功能小弟已经实现）
2、当浏览器滚动条拉到“关于我们”时，A不在固定在浏览器顶部，如果还是固定在顶部的话，A就会把“关于我们”给挡住，就是这个想请大牛们帮帮我！

我现在的代码：

//侧边栏顶部广告跟随滚动条固定在顶部效果

$(function(){$(function() {

	//检查对象，#boxs是要随滚动条固定的ID

	var offset = $('#boxs').offset();

	$(window).scroll(function () {

	//检查对象的顶部是否在游览器可见的范围内

		var scrollTop = $(window).scrollTop();

			if (offset.top < scrollTop){

				$('#boxs').addClass('fixed');

			}

			else{

				$('#boxs').removeClass('fixed');

			} 

		});

	});

});

6 个解决方案

#1

参考如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.cf:after{content:'';display:block;clear:both;}

.cf{zoom:1;}

.warp{width:1024px;margin:0 auto;}

.warp .left{float:left;height:2000px;background:red;width:800px;}

.warp .right{float:right;width:224px; position:relative;}

.warp .right .up{height:1000px;background:blue;}

.warp .right .down{height:500px;background:green; width:224px;}

.footer{width:1024px;margin:0 auto;height:400px;background:#000;}

.fixed{ position:fixed;right:0;bottom:0;}

</style>

<script type="text/javascript" src="http://festatic.aliapp.com/js/jquery/1.11.0/jquery.min.js"></script>

<script>

$(function(){

	//检查对象，#boxs是要随滚动条固定的ID

    var offset = $('#boxs').offset();

	var offset_f=$('.footer').offset();//获取底部

    $(window).scroll(function () {

    //检查对象的顶部是否在游览器可见的范围内

        var scrollTop = $(window).scrollTop();

            if (offset.top <= scrollTop){

                $('#boxs').addClass('fixed');

            }

            else{

                $('#boxs').removeClass('fixed');

            } 

			//当底部进入可视区

			if($(window).height()+scrollTop>=offset_f.top)

			{console.log($(window).height()+'|'+scrollTop+'|'+offset_f.top+'|'+$("#boxs").offset().top);

				$('#boxs').css({bottom:$(window).height()+scrollTop-offset_f.top});//底部进入可视区，开始控制boxs

			}

        });

})

</script>

</head>


<body>

<div class="warp cf">

	<div class="left"></div>

    <div class="right">

    	<div class="up"></div>

        <div class="down" id="boxs"></div>

    </div>

</div>

<div class="footer"></div>

</body>

</html>

#2

求大牛帮忙解答一下

#3

在底部区域出现之前，boxs已经转成了固定定位，按照你的需求，当底部出现的时候，那么boxs的top距离顶部不在固定，必须按照底部进入可视区的高度在原来的 top 上减掉，也就是让boxs上移，从而达到不遮盖底部的效果

不过你可以这么简单的理解，比如boxs一直固定在页面底部也就是 bottom:0;right:0;

当底部出现的时候，那么boxs要远离底部，让出位置给底部，距离底部的距离就是底部进入可视区的高度

#4

该回复于2014-04-18 14:03:19被管理员删除

#5

引用 3 楼 Return_false 的回复:

在底部区域出现之前，boxs已经转成了固定定位，按照你的需求，当底部出现的时候，那么boxs的top距离顶部不在固定，必须按照底部进入可视区的高度在原来的 top 上减掉，也就是让boxs上移，从而达到不遮盖底部的效果

不过你可以这么简单的理解，比如boxs一直固定在页面底部也就是 bottom:0;right:0;

当底部出现的时候，那么boxs要远离底部，让出位置给底部，距离底部的距离就是底部进入可视区的高度

还是不行，boxs一直是固定在页面顶部的，top:0;
当box移动到footer事，应该让box的top变成它最开始的距顶部的距离吧

#6

同问

#1

参考如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.cf:after{content:'';display:block;clear:both;}

.cf{zoom:1;}

.warp{width:1024px;margin:0 auto;}

.warp .left{float:left;height:2000px;background:red;width:800px;}

.warp .right{float:right;width:224px; position:relative;}

.warp .right .up{height:1000px;background:blue;}

.warp .right .down{height:500px;background:green; width:224px;}

.footer{width:1024px;margin:0 auto;height:400px;background:#000;}

.fixed{ position:fixed;right:0;bottom:0;}

</style>

<script type="text/javascript" src="http://festatic.aliapp.com/js/jquery/1.11.0/jquery.min.js"></script>

<script>

$(function(){

	//检查对象，#boxs是要随滚动条固定的ID

    var offset = $('#boxs').offset();

	var offset_f=$('.footer').offset();//获取底部

    $(window).scroll(function () {

    //检查对象的顶部是否在游览器可见的范围内

        var scrollTop = $(window).scrollTop();

            if (offset.top <= scrollTop){

                $('#boxs').addClass('fixed');

            }

            else{

                $('#boxs').removeClass('fixed');

            } 

			//当底部进入可视区

			if($(window).height()+scrollTop>=offset_f.top)

			{console.log($(window).height()+'|'+scrollTop+'|'+offset_f.top+'|'+$("#boxs").offset().top);

				$('#boxs').css({bottom:$(window).height()+scrollTop-offset_f.top});//底部进入可视区，开始控制boxs

			}

        });

})

</script>

</head>


<body>

<div class="warp cf">

	<div class="left"></div>

    <div class="right">

    	<div class="up"></div>

        <div class="down" id="boxs"></div>

    </div>

</div>

<div class="footer"></div>

</body>

</html>

#2

求大牛帮忙解答一下

#3

#4

该回复于2014-04-18 14:03:19被管理员删除

#5

引用 3 楼 Return_false 的回复:

在底部区域出现之前，boxs已经转成了固定定位，按照你的需求，当底部出现的时候，那么boxs的top距离顶部不在固定，必须按照底部进入可视区的高度在原来的 top 上减掉，也就是让boxs上移，从而达到不遮盖底部的效果

不过你可以这么简单的理解，比如boxs一直固定在页面底部也就是 bottom:0;right:0;

当底部出现的时候，那么boxs要远离底部，让出位置给底部，距离底部的距离就是底部进入可视区的高度

还是不行，boxs一直是固定在页面顶部的，top:0;
当box移动到footer事，应该让box的top变成它最开始的距顶部的距离吧

#6

同问

秒客网

jquery根据滚动条把DIV固定在某一个位置的问题

6 个解决方案

#1

#2

#3

#4

#5

#6

#1

#2

#3

#4

#5

#6

相关文章