弄了好久，实在没办法了，请大神帮忙看下，出在什么问题上

qingwadaxia_1 2020-09-15 08:39:36
<!DOCTYPE html>
<html>

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


</head>
<style>
* {
padding: 0;
margin: 0;
}

body {
width: 98%;
height: 15000px;
margin: 0 auto;
}

.head {
width: 100%;
height: 70px;
background: black;
}

.head .head-right {
float: right;
width: 50%;
height: 30px;
line-height: 30px;
margin-top: 20px;
}

.head .head-right ul li {
float: left;
width: 20%;
color: #fff;
}

.tab1 {
width: 25%;
float: left;
background: #ccc;
height: 36px;
}

.div1 {
height: 36px;
width: 100%;
display: none;
}

.div1.show {
display: block;
}

.fixeds {
position: fixed;
top: 0;
}

.fixeds1 {
position: fixed;
top: 70px;
}
</style>

<body>

<div style="height:100px;">

</div>

<div class="head">
<div class="head-right">
<ul>
<li class="show">按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
<li>按钮5</li>
</ul>
</div>
</div>

<div class="div1 show">
<div class="tab1">
tab1
</div>

<div class="tab1">
tab2
</div>

<div class="tab1">
tab3
</div>

<div class="tab1">
tab4
</div>
</div>

<div class="div1">
<div class="tab1 show">
tab5
</div>

<div class="tab1">
tab6
</div>

<div class="tab1">
tab7
</div>

<div class="tab1">
tab8
</div>
</div>

<div class="div1">
<div class="tab1 show">
tab9
</div>

<div class="tab1">
tab10
</div>

<div class="tab1">
tab11
</div>

<div class="tab1">
tab12
</div>
</div>

<div class="div1">
<div class="tab1 show">
tab13
</div>

<div class="tab1">
tab14
</div>

<div class="tab1">
tab15
</div>

<div class="tab1">
tab16
</div>
</div>
<div class="div1">
<div class="tab1 show">
tab17
</div>

<div class="tab1">
tab18
</div>

<div class="tab1">
tab19
</div>

<div class="tab1">
tab20
</div>
</div>

<script>
var headRli = document.querySelector(".head-right").querySelectorAll("li");
var headh = document.querySelector(".head");
var div1 = document.querySelectorAll(".div1");

for (let i = 0; i < headRli.length; i++) {
headRli[i].index = i;
headRli[i].onclick = function() {
for (let i = 0; i < headRli.length; i++) {
div1[i].style.display = "none";
}
div1[this.index].style.display = "block";
}
}

var twoHeight = headh.offsetHeight + div1.offsetHeight;

window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if (scrollTop > twoHeight - 10) {
headh.classList.add("fixeds");
// div1.classList.add("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.add("fixeds1");
}
} else {
headh.classList.remove("fixeds");
// div1.classList.remove("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.remove("fixeds1");
}
}
}
</script>
</body>

</html>

上面是下拉滚动一定位置之后，head 和div1 两块固定吸顶在顶部，本身代码没什么问题，现在问题是点击按钮1~5 切换对应div1 之后，再下拉，吸顶效果就没有了，难点就在于，div1 是一堆数组都需要吸顶，切换之后就不能吸顶了，我现在用for循环，弄的两块都不吸顶了，也没报错，请大神帮忙看看，
...全文
1822 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingwadaxia_1 2020-09-17
  • 打赏
  • 举报
 回复
引用 6 楼 天际的海浪 的回复:
div1是数组，数组没有.offsetHeight属性。 你可以div1[0].offsetHeight这样获取。 但div1[0].offsetHeight获取的是第一个div1的高度。 如果你每个div1的高度不一样就需要在window.onscroll事件内获取当前显示的div1的高度。
真的是点醒，感谢，自己真的找了好久
qingwadaxia_1 2020-09-16
  • 打赏
  • 举报
 回复
引用 1 楼 天际的海浪 的回复:

        var headRli = document.querySelector(".head-right").querySelectorAll("li");
        var headh = document.querySelector(".head");
        var div1 = document.querySelectorAll(".div1");

        for (let i = 0; i < headRli.length; i++) {
            headRli[i].index = i;
            headRli[i].onclick = function() {
                for (let i = 0; i < headRli.length; i++) {
                    div1[i].classList.remove("show");
                }
                div1[this.index].classList.add("show");
            }
        }

        window.onscroll = function() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var twoHeight = headh.offsetHeight + document.querySelector(".div1.show").offsetHeight;

            if (scrollTop > twoHeight - 10) {
                headh.classList.add("fixeds");
                // div1.classList.add("fixeds1");
                for (let i = 0; i < div1.length; i++) {
                    div1[i].classList.add("fixeds1");
                }
            } else {
                headh.classList.remove("fixeds");
                // div1.classList.remove("fixeds1");
                for (let i = 0; i < div1.length; i++) {
                    div1[i].classList.remove("fixeds1");
                }
            }
        }
大神，你好，请问我是存在什么问题呢，
chinaskysun 2020-09-16
  • 打赏
  • 举报
 回复
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 改为 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 试试看
尚稻山 2020-09-16
  • 打赏
  • 举报
 回复
我这试了一下你代码，没发现有你说的效果啊。。。
天际的海浪 2020-09-16
  • 打赏
  • 举报
 回复
div1是数组，数组没有.offsetHeight属性。 你可以div1[0].offsetHeight这样获取。 但div1[0].offsetHeight获取的是第一个div1的高度。 如果你每个div1的高度不一样就需要在window.onscroll事件内获取当前显示的div1的高度。
天际的海浪 2020-09-15
  • 打赏
  • 举报
 回复 

        var headRli = document.querySelector(".head-right").querySelectorAll("li");
        var headh = document.querySelector(".head");
        var div1 = document.querySelectorAll(".div1");

        for (let i = 0; i < headRli.length; i++) {
            headRli[i].index = i;
            headRli[i].onclick = function() {
                for (let i = 0; i < headRli.length; i++) {
                    div1[i].classList.remove("show");
                }
                div1[this.index].classList.add("show");
            }
        }

        window.onscroll = function() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var twoHeight = headh.offsetHeight + document.querySelector(".div1.show").offsetHeight;

            if (scrollTop > twoHeight - 10) {
                headh.classList.add("fixeds");
                // div1.classList.add("fixeds1");
                for (let i = 0; i < div1.length; i++) {
                    div1[i].classList.add("fixeds1");
                }
            } else {
                headh.classList.remove("fixeds");
                // div1.classList.remove("fixeds1");
                for (let i = 0; i < div1.length; i++) {
                    div1[i].classList.remove("fixeds1");
                }
            }
        }
AJAX 必看实战精讲（大神必经之路）
AJAX = Asynchronous JavaScript and XML（异步... AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
IDE 中的tomcat 问题，正常启动访问是404或者无法访问
遇到问题都很烦，静下心来解决才自然。如果对您有用，请回来评论区留言，这样有助于我更有动力分享更多的文章。经验之谈，欢迎来喷。欢迎大神给与指点。本人QQ：949090007        编程中遇到的大部分的问题百度都能解决，就这个问题在百度找了好久都没发现正确的解决办法，最后还是我自己经过研究解决掉了。本人是IT小白，听说IDE工具编程非常好用就自己鼓捣了一下，初学IDE问题多多，Tomcat就遇...
记录一下这五天的学习mini2440。心酸呀
15年末购入了一块ARM2440（因为听说这块板的资源多上手容易，确实是有问题上网一搜很容易找到相同的） 买的是FriendlyARM 一点都不友善的友善之臂  官网上的光盘资料不更新 ARM9论坛上也是没客服没大神帮忙解答，比较冷清。还有。。。（看下去就知道了） 放假玩了几天 期间看了鸟哥的私房菜  快速翻看  跳过了bash脚本的内容（按鸟哥的说法 以后有需要再回来看） 主要看了v
[转载]物理大神的八卦完整版——大爱物理
这套八卦最早是四年前在熊博网的留言那里看到的，当然那个留言也是转载。后来可能是因为《生活大爆炸》热播的原因，很多高校论坛都有转载，刚刚搜了一下还是这个最全。豆瓣上也有整理版但只是很少的一部分，可惜找不到原始搜集作者是谁了。 BTW：当年牛逼的熊博网都被封了快三年了，08年那个春夏之交后就再也不能更新和查看，还真是时光如梭啊。至今都不知道singularitys究竟是谁，那是俺唯一膜拜过的现实存在...
19年11月份，我为什么从上一家公司离职
最近要去找工作了，但是在过程中，我感觉自己总还有一份心结在这里， 所以我不打算逃避，想直面自己，也就是在半年后，再来看一看自己当初的离职。 我为什么对这家公司这么在意？ 这是一家技术氛围很浓厚的公司，上至公司领导层，下至公司中的团队成员，每个人都是对技术有追求的。公司会抽时间来做code review，也会安排时间进行课程培训*(但是因为没有经验，所以效果并不是很好。。。。。。)*，在迭代开始前也会给时间写代码设计文档。总之，如果没有发生意外的话，一切都应该是没问题的，毕竟996，一般人很难撑下来，但是在我
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章