jQuery-如何实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果?

意见反馈 意见反馈 主题:991 回复:2082

jQuery-如何实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果?

甜柠檬 发布于 2017-09-20 字数 386 浏览 1177 回复 1

http://data.auto.qq.com/car_serial/469/modelscompare.shtml

请输入图片描述
怎么弄出这样的效果。就是滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了。

要求:1. jQuery实现,最好不要用比较大的插件;
2. 页面上的元素已经有了,所以希望可以不修改现有的html标签。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

偏爱自由 2017-09-25 1 楼

其实就是判断位置是否到顶端,然后把那些元素设置为fixed,我给个例子吧

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
*{
padding:0;
margin:0;
}

header{

        position: fixed;
        top: 0;
        left: 0;
        height: 30px;
        width: 100%;
        background: #555;
        opacity: 0.8;
    }
    #nav,.nav{
        height: 30px;
        width: 100%;
        background: #000;
        opacity: 0.8;
    }
    .fixed{
        position: fixed;
        top:30px;
        left:0;
    }
&lt;/style&gt;

</head>
<body>
<div id="header"></div>
<div style="margin-top:30px;">
<script type="text/javascript">
//document.write('<div id="nav"></div>');
for(var i=0;i<100;i++)
document.write('<div>'+i+' hello world'+'</div>');
</script>
</div>
<div id="nav"></div>
<script type="text/javascript">
for(var i=100;i<200;i++)
document.write('<div>'+i+' hello world'+'</div>');
</script>
<script type="text/javascript">
function getElementViewTop(element){
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
  }
var elementScrollTop=0;
  if (document.compatMode == "BackCompat"){
elementScrollTop=document.body.scrollTop;
  } else {
elementScrollTop=document.documentElement.scrollTop;
  }
return actualTop;
 // return actualTop-elementScrollTop;
}
function getScroll()
{
var top, left, width, height;

if (document.documentElement &amp;&amp; document.documentElement.scrollTop) {
    top = document.documentElement.scrollTop;
    left = document.documentElement.scrollLeft;
    width = document.documentElement.scrollWidth;
    height = document.documentElement.scrollHeight;
} else if (document.body) {
    top = document.body.scrollTop;
    left = document.body.scrollLeft;
    width = document.body.scrollWidth;
    height = document.body.scrollHeight;
}
return { 'top': top, 'left': left, 'width': width, 'height': height };

}
var nav = document.getElementById('nav');
var posTop = getElementViewTop(nav);
window.addEventListener('scroll',function(event){
var scrollTop = getScroll().top;
var output = document.getElementById('output');
output.innerHTML = posTop +' '+scrollTop+' '+(posTop-scrollTop);
if(posTop>=30 && posTop-scrollTop <= 30)
nav.className = 'nav fixed';
else nav.className = 'nav';
},false);
</script>
<div id="output" style="position:fixed;width:60px;height:60px;right:100px;bottom:100px;background:#DDD">0</div>
</body>
</html>